/* Connect CRM - billing (CRM Plus Phase 1, docs/blueprints/CRM-PLUS-PHASE1-CONTRACT.md section 5.3, session S4).
   Only what this area draws that the screen kit (apps/shared/kit.css) does not: `cr-` classes scoped
   to the area. Colour only from tokens (--cx-*, --pa-*), no !important, no @layer; Day and Dark
   come from connect-theme.css; Compact (<= 640 px) rules at the end. */

/* ---- money and figures: tabular, never truncated ---------------------------------------------- */
.cr-bill-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-bill-num, th.cr-bill-num, td.cr-bill-num { text-align: end; font-variant-numeric: tabular-nums; }
.cr-bill-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2); margin: var(--pa-s2) 0 0; }
.cr-bill-roles { display: flex; flex-wrap: wrap; gap: var(--pa-s1); list-style: none; margin: var(--pa-s1) 0 0; padding: 0; }

/* ---- a document's header: its name and number wrap rather than run past the edge ---------------- */
.cr-bill-head > div:first-child { flex-wrap: wrap; row-gap: var(--pa-s1); }
.cr-bill-head h1 { white-space: normal; overflow-wrap: anywhere; min-width: 0; }

/* ---- documents list and filters ---------------------------------------------------------------- */
.cr-bill-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--pa-s3); min-width: 0; }
.cr-bill-filters .pa-field { min-width: 0; }
.cr-bill-docs td { vertical-align: top; }
.cr-bill-docs .cr-bill-chips { margin: 0; }
/* The words a reflowed row needs beside its two amounts; the column headers say them on wider screens. */
.cr-bill-cell-label { display: none; color: var(--cx-text-3); font-size: var(--cx-text-small); }
.cr-bill-filters .pa-filter-q { flex: 1 1 220px; }

/* ---- recipient picker --------------------------------------------------------------------------- */
.cr-bill-picker { display: flex; flex-direction: column; gap: var(--pa-s4); }
.cr-bill-pick-list { margin: 0; }
.cr-bill-pick { display: flex; width: 100%; min-width: 0; text-align: start; padding: var(--pa-s2) 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; border-radius: var(--cx-radius-sm); }
.cr-bill-pick:hover { background: var(--cx-hover); }
.cr-bill-pick:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.cr-bill-picker-new { border-top: 1px solid var(--cx-border-soft); padding-top: var(--pa-s3); }

/* ---- the document: recipient, lines, totals ------------------------------------------------------ */
.cr-bill-recipient { margin: 0 0 var(--pa-s3); overflow-wrap: anywhere; }
.cr-bill-snap { margin-top: var(--pa-s3); }
.cr-bill-snap > summary { cursor: pointer; color: var(--cx-link); font-size: var(--cx-text-small); padding: var(--pa-s2) 0; }
.cr-bill-snap > summary:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.cr-bill-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pa-s3); }
.cr-bill-line { border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius-sm); padding: var(--pa-s3); min-width: 0; }
.cr-bill-line-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pa-s2); margin-bottom: var(--pa-s2); }
.cr-bill-line-n { font-size: var(--cx-text-small); color: var(--cx-text-3); font-weight: var(--cx-weight-strong); }
.cr-bill-line-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.5fr); gap: var(--pa-s3); align-items: end; }
.cr-bill-line-grid .pa-field { min-width: 0; margin: 0; }
.cr-bill-lf-description { grid-column: 1 / -1; }
.cr-bill-line-sum { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: var(--pa-s2); font-variant-numeric: tabular-nums; }
.cr-bill-line-tax { display: flex; flex-wrap: wrap; gap: var(--pa-s2); font-size: var(--cx-text-small); color: var(--cx-text-3); }
.cr-bill-taxline { white-space: nowrap; }
.cr-bill-noline { list-style: none; }
.cr-bill-addline { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--pa-s3); margin-top: var(--pa-s4); }
.cr-bill-addline .pa-field { flex: 1 1 240px; min-width: 0; margin: 0; }
.cr-bill-lines-ro .pa-row-sub { display: block; }
.cr-bill-lines-ro .cr-bill-line-tax { flex-direction: column; gap: 0; }

.cr-bill-save { gap: var(--pa-s2); font-size: var(--cx-text-small); color: var(--cx-text-2); flex-wrap: wrap; }
.cr-bill-save[data-state="failed"], .cr-bill-save[data-state="invalid"] { color: var(--cx-danger-text); }
.cr-bill-save[data-state="saved"] { color: var(--cx-success-text); }
.cr-bill-totals { margin: 0; display: flex; flex-direction: column; gap: var(--pa-s2); }
.cr-bill-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pa-s3); font-size: var(--cx-text-small); }
.cr-bill-total dt { color: var(--cx-text-2); min-width: 0; }
.cr-bill-total dd { margin: 0; text-align: end; }
.cr-bill-total.is-grand { border-top: 1px solid var(--cx-border); padding-top: var(--pa-s2); font-size: var(--cx-text-section); font-weight: var(--cx-weight-strong); }
.cr-bill-total.is-grand dt { color: var(--cx-text); }
.cr-bill-total.is-balance { font-weight: var(--cx-weight-strong); }
@media (min-width: 1024px) { .cr-bill-sticky { position: sticky; top: var(--pa-s4); } }

/* ---- the preview: the server's HTML, sandboxed; a document is paper in either theme ------------- */
.cr-bill-preview-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--pa-s3); margin-bottom: var(--pa-s3); }
.cr-bill-preview-bar .pa-help { margin: 0; }
.cr-bill-frame { min-width: 0; }
/* ui-exception: V1 - `Canvas` with a light colour scheme gives the sandboxed document a paper
   background in Dark too (its own HTML may set none); revisit when the theme has a paper token. */
.cr-bill-iframe { display: block; width: 100%; min-height: 560px; height: 70vh; border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm); color-scheme: light; background: Canvas; }

/* ---- side lists ---------------------------------------------------------------------------------- */
.cr-bill-payments .pa-row-main, .cr-bill-notes .pa-row-main, .cr-bill-versions .pa-row-main { min-width: 0; overflow-wrap: anywhere; }
.cr-bill-payments .pa-ev { align-self: flex-start; }

/* ---- settings ------------------------------------------------------------------------------------ */
.cr-bill-settings { display: flex; flex-direction: column; gap: var(--pa-s3); }
.cr-bill-numbering .pa-input, .cr-bill-numbering .pa-select { min-width: 0; width: 100%; }
.cr-bill-numbering th[scope="row"] { text-align: start; font-weight: var(--cx-weight-strong); }
.cr-bill-sample { font-family: var(--cx-font-mono); font-variant-numeric: tabular-nums; }
.cr-bill-settings-foot { justify-content: flex-end; }
.cr-bill-fields { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--pa-s3); }
.cr-bill-cannot { display: inline-flex; align-items: center; gap: var(--pa-s1); }

/* ---- Compact (<= 640 px): one column; the line editor reflows ------------------------------------ */
@media (max-width: 640px) {
  .cr-bill-filters { flex-direction: column; align-items: stretch; }
  .cr-bill-filters .pa-filter-q { flex: none; }
  .cr-bill-filters .pa-field { width: 100%; max-width: none; }
  .cr-bill-cell-label { display: inline; }
  .cr-bill-filters .pa-input, .cr-bill-filters .pa-select { width: 100%; max-width: none; }
  .cr-bill-line-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cr-bill-line-sum { justify-content: flex-start; }
  .cr-bill-lf-tax { grid-column: 1 / -1; }
  .cr-bill-addline { flex-direction: column; align-items: stretch; }
  .cr-bill-addline .pa-field { flex: 0 0 auto; }
  .cr-bill-iframe { min-height: 420px; height: 60vh; }
  .cr-bill-preview-bar { flex-direction: column; align-items: stretch; }
}

/* CONNECT_CATALOGUE_V1 (2026-10-25) - My Products & Services (catalogue.js `products`): the approval summary, the
   filters, each row's photo, kind and category line, its price's approval state. One accent; tone from the chips. */
.cr-bill-cat-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2); width: 100%; }
.cr-bill-cat-filters .pa-input { flex: 1 1 260px; min-width: 0; }
.cr-bill-cat-approval { display: grid; gap: var(--pa-s3); }
.cr-bill-cat-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pa-s2); }
.cr-bill-cat-counts > div { display: flex; flex-direction: column; gap: 2px; padding: var(--pa-s3); border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius); background: var(--cx-surface-2); }
.cr-bill-cat-counts b { font-size: var(--cx-text-section, 20px); font-variant-numeric: tabular-nums; line-height: 1.2; }
.cr-bill-cat-counts span { color: var(--cx-text-2); font-size: var(--cx-text-small); }
.cr-bill-cat-import { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pa-s2); padding: var(--pa-s3);
  border: 1px solid color-mix(in srgb, var(--cx-info) 25%, var(--cx-border-soft)); border-radius: var(--cx-radius); background: var(--cx-info-soft); color: var(--cx-info-text); }
.cr-bill-cat-import p { flex: 1 1 280px; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.cr-bill-cat-item { display: flex; align-items: flex-start; gap: var(--pa-s3); min-width: 0; }
.cr-bill-cat-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-bill-cat-thumb { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--cx-surface-2); border: 1px solid var(--cx-border-soft); }
.cr-bill-cat-thumb.is-empty { display: grid; place-items: center; color: var(--cx-text-3); }
.cr-bill-cat-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 52ch; }
.cr-bill-cat-table .pa-row-actions { white-space: normal; }
.cr-bill-cat-table .pa-row-actions .pa-btn { margin: 2px 0; }
@media (max-width: 640px) {
  .cr-bill-cat-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cr-bill-cat-counts > div { padding: var(--pa-s2); }
  .cr-bill-cat-filters .pa-seg { overflow-x: auto; max-width: 100%; }
  .cr-bill-cat-desc { max-width: none; }
}
.cr-bill-cat-table td.cr-bill-num .pa-row-sub { display: block; }

/* CONNECT_CATALOGUE_IMPORT_V1 (2026-10-25) - Import Products & Services from a file (billing/catalogue.js importFile):
   the plan with its counts, the duplicate choice, the first rows, then a progress bar and the result. */
.cr-bill-imp { display: flex; flex-direction: column; gap: var(--pa-s3); min-width: 0; }
.cr-bill-imp-pick .pa-input[type="file"] { padding: var(--pa-s2); min-height: 44px; }
.cr-bill-imp-cols summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.cr-bill-imp-cols summary:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; border-radius: var(--cx-radius-sm); }
.cr-bill-imp-dup { margin: 0; padding: var(--pa-s3); border: 1px solid var(--cx-border); border-radius: var(--cx-radius); display: flex; flex-direction: column; gap: var(--pa-s2); }
.cr-bill-imp-opt { display: flex; align-items: flex-start; gap: var(--pa-s2); min-height: 32px; cursor: pointer; }
.cr-bill-imp-opt input { margin-top: 3px; flex: none; }
.cr-bill-imp-rows { border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius); min-width: 0; }
@media (min-width: 641px) { .cr-bill-imp-rows { max-height: min(52dvh, 520px); overflow: auto; } }
.cr-bill-imp-table { margin: 0; }
.cr-bill-imp-table td { vertical-align: top; overflow-wrap: anywhere; }
.cr-bill-imp-err { color: var(--cx-danger-text, var(--cx-danger)); }
.cr-bill-imp-progress { padding: var(--pa-s2) 0; }
.cr-bill-imp-done { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pa-s2); }
.cr-bill-imp-done p { margin: 0; }
.cr-bill-imp-go { position: sticky; bottom: 0; padding-top: var(--pa-s2); background: var(--cx-surface); }
@media (pointer: coarse) { .cr-bill-imp-opt, .cr-bill-imp .pa-btn, .cr-bill-imp-cols summary { min-height: 44px; } }

/* CR_BS_V2 (2026-10-30) - Billing Settings (billing/settings.js): a jump row, three panels, tax as cards, a save bar
   that sticks to the bottom once something changed, and the read-only settings as text. */
.cr-bill-set-jump { display: flex; flex-wrap: wrap; gap: var(--pa-s2); }
.cr-bill-set-jump a { text-decoration: none; color: var(--cx-text-2); min-height: 32px; display: inline-flex; align-items: center; }
.cr-bill-set-jump a:hover { color: var(--cx-text); background: var(--cx-hover); }
.cr-bill-set-jump a:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.cr-bill-set-sec { display: flex; flex-direction: column; gap: var(--pa-s3); scroll-margin-top: var(--pa-s4); min-width: 0; }
.cr-bill-set-sec + .cr-bill-set-sec { border-top: 1px solid var(--cx-border-soft); padding-top: var(--pa-s5, 20px); }
/* Where the table has column headers they name each input; the per-cell label stays for screen readers only.
   A phone reflows the rows into cards, and there the label is the only visible name. */
@media (min-width: 641px) {
  .cr-bill-numbering td > label.pa-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}
.cr-bill-set-sec > .pa-group-title { margin: 0; }
.cr-bill-set-sec > .pa-help { margin: 0; }
.cr-bill-set-sec .pa-group-title:focus { outline: none; }
.cr-bill-set-regimes { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--pa-s2); }
.cr-bill-set-legend { grid-column: 1 / -1; padding: 0; margin-bottom: var(--pa-s1); font-size: var(--cx-text-small); font-weight: var(--cx-weight-strong); color: var(--cx-text); }
.cr-bill-set-regime { display: flex; align-items: flex-start; gap: var(--pa-s2); padding: var(--pa-s3); border: 1px solid var(--cx-border); border-radius: var(--cx-radius); background: var(--cx-surface); cursor: pointer; min-width: 0; }
.cr-bill-set-regime:hover { background: var(--cx-hover); }
.cr-bill-set-regime:has(input:checked) { border-color: var(--cx-accent); box-shadow: inset 0 0 0 1px var(--cx-accent); }
.cr-bill-set-regime:has(input:focus-visible) { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.cr-bill-set-regime input { margin: 3px 0 0; flex: none; accent-color: var(--cx-accent); }
.cr-bill-set-regime-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-bill-set-regime-text strong { font-size: var(--cx-text-small); font-weight: var(--cx-weight-strong); }
.cr-bill-set-regime-text span { font-size: var(--cx-text-small); color: var(--cx-text-2); }
.cr-bill-numbering output.cr-bill-sample { white-space: nowrap; }
.cr-bill-set-savebar [hidden] { display: none; }
.cr-bill-set-savebar[data-dirty="true"] { position: sticky; bottom: 0; z-index: 2; }
.cr-bill-set-savebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--pa-s2);
  padding: var(--pa-s3) var(--pa-s4); border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius); background: var(--cx-surface); }
.cr-bill-set-savebar[data-dirty="true"] { border-color: var(--cx-border); box-shadow: var(--cx-shadow-2); }
.cr-bill-set-state { margin: 0 auto 0 0; font-size: var(--cx-text-small); color: var(--cx-text-3); }
.cr-bill-set-savebar[data-dirty="true"] .cr-bill-set-state { color: var(--cx-text); font-weight: var(--cx-weight-strong); }
.cr-bill-set-read { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--pa-s3) var(--pa-s4); }
.cr-bill-set-read > div { min-width: 0; }
.cr-bill-set-read dt { font-size: var(--cx-text-small); color: var(--cx-text-3); }
.cr-bill-set-read dd { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-line; }
@media (pointer: coarse) { .cr-bill-set-jump a { min-height: 44px; } .cr-bill-set-regime { min-height: 44px; } }
@media (max-width: 640px) {
  .cr-bill-set-regimes { grid-template-columns: minmax(0, 1fr); }
  .cr-bill-set-savebar { padding: var(--pa-s2) var(--pa-s3); }
  .cr-bill-set-savebar .pa-btn { flex: 1 1 auto; }
  .cr-bill-set-state { flex: 1 1 100%; }
}

/* A product's media (FB-R9B5YDF2): photos, video and sound play in place; documents download. */
.cr-bill-media-sheet .pa-sheet { max-width: min(960px, 100%); }
.cr-bill-media-box { display: grid; gap: var(--pa-s3, 12px); }
.cr-bill-media { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pa-s3, 12px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.cr-bill-media-item { display: grid; gap: 8px; align-content: start; border: 1px solid var(--cx-border); border-radius: 12px; padding: 10px; background: var(--cx-surface); min-width: 0; }
.cr-bill-media-view { display: grid; place-items: center; min-height: 120px; border-radius: 8px; background: var(--cx-surface-2, transparent); overflow: hidden; }
.cr-bill-media-view img, .cr-bill-media-view video { display: block; width: 100%; max-height: 220px; object-fit: contain; }
.cr-bill-media-view audio { width: 100%; }
.cr-bill-media-ico { color: var(--cx-text-2); }
/* The document preview full screen (FB-U6BZW3ZK): the sheet takes the window, the page fills it. */
.cr-bill-preview-full .pa-sheet { max-width: 100%; width: min(1200px, 100%); height: min(100dvh, 100%); }
.cr-bill-preview-full .pa-sheet-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cr-bill-fullframe { flex: 1; min-height: 70vh; display: flex; }
.cr-bill-fullframe .cr-bill-iframe { flex: 1; width: 100%; min-height: 70vh; height: auto; }
.cr-bill-media-meta { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }

/* ---- the Product & Service Master and its Auto-Fill (screens/billing/master.js, 2026-11-02) -----------------------
   One record in 33 categories: a fact never appears without its state (the word, its icon, then the colour), where it
   came from and the words it came from. Desktop: categories, fields and the sync panel side by side; Medium and
   Compact: one column, the category list a scroller of its own. */
.cr-bill-cat-open { color: var(--cx-text); font-weight: 600; text-decoration: none; }
.cr-bill-cat-open:hover { text-decoration: underline; }
.cr-bill-pm { display: grid; gap: var(--pa-s3); min-width: 0; }
.cr-bill-pm-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s3); min-width: 0; }
.cr-bill-pm-thumb { flex: none; width: 56px; height: 56px; border-radius: var(--cx-radius); object-fit: cover; background: var(--cx-surface-2); }
.cr-bill-pm-thumb.is-empty { display: grid; place-items: center; color: var(--cx-text-3); }
.cr-bill-pm-title { flex: 1 1 280px; min-width: 0; }
.cr-bill-pm-title h1 { margin: 0; font-size: var(--cx-text-title, 22px); letter-spacing: -.01em; overflow-wrap: anywhere; }
.cr-bill-pm-sub { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--cx-text-3); font-size: var(--cx-text-small); }
.cr-bill-pm-sub b { color: var(--cx-text); font-variant-numeric: tabular-nums; }
.cr-bill-pm-actions { display: flex; flex-wrap: wrap; gap: var(--pa-s2); }
.cr-bill-pm-summary { display: grid; gap: var(--pa-s2); padding: var(--pa-s3); border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius-lg); background: var(--cx-surface); }
.cr-bill-pm-meter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2) var(--pa-s3); font-size: var(--cx-text-small); }
.cr-bill-pm-meter-bar { flex: 1 1 220px; height: 8px; border-radius: 4px; background: var(--cx-surface-2); overflow: hidden; }
.cr-bill-pm-meter-bar span { display: block; height: 100%; border-radius: 4px; background: var(--cx-success); }
.cr-bill-pm-tally { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pa-s2) var(--pa-s4); font-size: var(--cx-text-small); }
.cr-bill-pm-tally li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cr-bill-pm-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 0 7px; border-radius: var(--cx-radius-pill); background: var(--cx-surface-2); color: var(--cx-text-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cr-bill-pm-badge.is-ok { background: var(--cx-success-soft); color: var(--cx-success-text); }
.cr-bill-pm-badge.is-warn { background: var(--cx-warning-soft); color: var(--cx-warning-text); }
.cr-bill-pm-badge.is-info { background: var(--cx-info-soft); color: var(--cx-info-text); }
.cr-bill-pm-layout { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) minmax(240px, 300px); gap: var(--pa-s4); align-items: start; min-width: 0; }
.cr-bill-pm-nav { position: sticky; top: calc(var(--pa-top-h, 48px) + 8px); max-height: calc(100dvh - var(--pa-top-h, 48px) - 24px); overflow: auto; display: grid; gap: 4px; padding-right: 4px; scrollbar-width: thin; }
.cr-bill-pm-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.cr-bill-pm-nav a { display: flex; align-items: center; gap: 8px; min-height: max(var(--pa-tap), 30px); padding: 0 8px; border-radius: 7px; color: var(--cx-text-2); font-size: var(--cx-text-small); text-decoration: none; }
.cr-bill-pm-nav a:hover { background: var(--cx-hover); color: var(--cx-text); }
.cr-bill-pm-nav-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-bill-pm-nav-sec { margin: 10px 8px 2px; color: var(--cx-text-3); font-size: 12px; font-weight: 650; }
.cr-bill-pm-no { display: inline-grid; place-items: center; flex: none; min-width: 22px; height: 20px; padding: 0 4px; border-radius: 6px; background: var(--cx-surface-2); color: var(--cx-text-3); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cr-bill-pm-n { color: var(--cx-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.cr-bill-pm-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.cr-bill-pm-filters button { min-height: max(var(--pa-tap), 26px); padding: 0 8px; border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius-pill); background: var(--cx-surface); color: var(--cx-text-2); font: inherit; font-size: 12px; cursor: pointer; }
.cr-bill-pm-filters button[aria-pressed="true"] { border-color: var(--cx-action); background: var(--cx-action); color: var(--cx-action-ink); }
.cr-bill-pm-other { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0 8px; color: var(--cx-text-3); font-size: 12px; }
.cr-bill-pm-cats { display: grid; gap: var(--pa-s3); min-width: 0; }
.cr-bill-pm-cat { scroll-margin-top: calc(var(--pa-top-h, 48px) + 12px); padding: var(--pa-s3) var(--pa-s4); border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius-lg); background: var(--cx-surface); min-width: 0; }
.cr-bill-pm-cat.is-other { opacity: .78; }
.cr-bill-pm-cat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cr-bill-pm-cat-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--cx-text-section); }
.cr-bill-pm-cat-head h2:focus { outline: none; }
.cr-bill-pm-grow { flex: 1 1 auto; }
.cr-bill-pm-fields { display: grid; margin: var(--pa-s2) 0 0; }
.cr-bill-pm-field { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); gap: 4px var(--pa-s3); padding: 8px 0; border-top: 1px solid var(--cx-border-soft); font-size: var(--cx-text-small); }
.cr-bill-pm-field dt { color: var(--cx-text-2); font-weight: 550; overflow-wrap: anywhere; }
.cr-bill-pm-field dd { margin: 0; display: grid; gap: 4px; min-width: 0; }
.cr-bill-pm-field.is-missing .cr-bill-pm-val, .cr-bill-pm-field.is-not_applicable .cr-bill-pm-val { color: var(--cx-text-3); }
.cr-bill-pm-val { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cr-bill-pm-text { white-space: pre-wrap; }
.cr-bill-pm-list { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cr-bill-pm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cr-bill-pm-src { color: var(--cx-text-3); font-size: 12px; }
.cr-bill-pm-int { color: var(--cx-text-3); font-size: 12px; font-weight: 500; }
.cr-bill-pm-prop { display: block; margin-top: 2px; padding: 4px 8px; border-radius: var(--cx-radius-sm); background: var(--cx-info-soft); color: var(--cx-info-text); }
.cr-bill-pm-why summary { cursor: pointer; color: var(--cx-link); font-size: 12px; min-height: max(var(--pa-tap), 22px); display: inline-flex; align-items: center; }
.cr-bill-pm-why q { display: block; margin: 4px 0; padding: 6px 8px; border-left: 3px solid var(--cx-border-strong); background: var(--cx-surface-2); color: var(--cx-text-2); font-size: 12px; overflow-wrap: anywhere; }
.cr-bill-pm-acts { display: flex; flex-wrap: wrap; gap: 4px; }
.cr-bill-pm-acts:empty { display: none; }
.cr-bill-pm-edit { display: grid; gap: 6px; }
.cr-bill-pm-edit .pa-input, .cr-bill-pm-edit .pa-select { width: 100%; min-height: var(--pa-ctl); }
.cr-bill-pm-edit-acts { display: flex; gap: 6px; }
.cr-bill-pm-none { margin: var(--pa-s2) 0 0; }
.cr-bill-pm-side { position: sticky; top: calc(var(--pa-top-h, 48px) + 8px); display: grid; gap: var(--pa-s3); min-width: 0; }
.cr-bill-pm-side section { padding: var(--pa-s3); border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius-lg); background: var(--cx-surface); display: grid; gap: 6px; }
.cr-bill-pm-side h2 { margin: 0; font-size: var(--cx-text-section); }
.cr-bill-pm-sync, .cr-bill-pm-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--cx-text-small); }
.cr-bill-pm-sync li, .cr-bill-pm-hist li { display: grid; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--cx-border-soft); min-width: 0; overflow-wrap: anywhere; }
.cr-bill-pm-sync li:last-child, .cr-bill-pm-hist li:last-child { border-bottom: 0; }
.cr-bill-pm-sync-l { font-weight: 550; }
.cr-bill-pm-sync-s { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cr-bill-pm-sync-e { color: var(--cx-danger-text); font-size: 12px; }
.cr-bill-pm-intake { display: grid; gap: var(--pa-s3); }
.cr-bill-pm-intake textarea { width: 100%; }
.cr-bill-pm-drop { display: flex; align-items: center; gap: var(--pa-s3); min-height: 72px; padding: var(--pa-s3); border: 2px dashed var(--cx-border-strong); border-radius: var(--cx-radius-lg); background: var(--cx-surface-2); color: var(--cx-text-2); cursor: pointer; }
.cr-bill-pm-drop:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.cr-bill-pm-drop.is-over { border-color: var(--cx-accent); background: var(--cx-accent-soft); }
.cr-bill-pm-filelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cr-bill-pm-filelist:empty { display: none; }
.cr-bill-pm-filelist li { display: flex; align-items: center; gap: 8px; font-size: var(--cx-text-small); overflow-wrap: anywhere; }
.cr-bill-pm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2) var(--pa-s4); }
/* Everything the website lists (FB-KSLSHHSL): the site field grows, the button keeps its words. */
.cr-bill-pm-site { display: grid; gap: var(--pa-s2); padding: var(--pa-s3); border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius); min-width: 0; }
.cr-bill-pm-site h3 { margin: 0; font-size: var(--cx-text-section); }
.cr-bill-pm-site .pa-help { margin: 0; }
.cr-bill-pm-site .cr-bill-pm-row { align-items: flex-end; }
.cr-bill-pm-site-field { flex: 1 1 16rem; min-width: 0; }
.cr-bill-pm-or { margin: 0; color: var(--cx-text-2); font-weight: 600; }
.cr-bill-pm-ai { display: flex; align-items: center; gap: 6px; color: var(--cx-text-2); font-size: var(--cx-text-small); }
.cr-bill-pm-reading { display: flex; align-items: center; gap: 8px; color: var(--cx-text-2); }
.cr-bill-pm-review { display: grid; gap: var(--pa-s3); }
.cr-bill-pm-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--cx-text-small); }
.cr-bill-pm-sources li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.cr-bill-pm-facts { display: grid; gap: var(--pa-s3); }
.cr-bill-pm-facts fieldset, .cr-bill-pm-qs { margin: 0; padding: var(--pa-s2) var(--pa-s3); border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius); }
.cr-bill-pm-facts legend, .cr-bill-pm-qs legend { padding: 0 4px; font-weight: 650; font-size: var(--cx-text-small); }
.cr-bill-pm-fact { display: grid; grid-template-columns: auto minmax(110px, 26%) minmax(0, 1fr) auto; gap: 2px var(--pa-s2); align-items: start; padding: 6px 0; border-top: 1px solid var(--cx-border-soft); font-size: var(--cx-text-small); }
.cr-bill-pm-fact:first-of-type { border-top: 0; }
.cr-bill-pm-fact input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--cx-action); }
.cr-bill-pm-fact-l { color: var(--cx-text-2); font-weight: 550; }
.cr-bill-pm-fact-v { min-width: 0; overflow-wrap: anywhere; }
.cr-bill-pm-fact-e, .cr-bill-pm-fact-c { grid-column: 2 / -1; color: var(--cx-text-3); font-size: 12px; overflow-wrap: anywhere; }
.cr-bill-pm-fact.is-conflict { background: var(--cx-warning-soft); border-radius: var(--cx-radius-sm); padding-inline: 6px; }
.cr-bill-pm-matches { display: grid; gap: var(--pa-s2); }
@media (max-width: 1279px) {
  .cr-bill-pm-layout { grid-template-columns: minmax(190px, 220px) minmax(0, 1fr); }
  .cr-bill-pm-side { position: static; grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
}
@media (max-width: 900px) {
  .cr-bill-pm-layout { grid-template-columns: minmax(0, 1fr); }
  .cr-bill-pm-nav { position: static; max-height: none; overflow: visible; }
  .cr-bill-pm-nav ol { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .cr-bill-pm-nav a { white-space: nowrap; border: 1px solid var(--cx-border-soft); }
  .cr-bill-pm-nav-t { overflow: visible; }
  .cr-bill-pm-nav-sec { margin: 6px 0 2px; }
}
@media (max-width: 640px) {
  .cr-bill-pm-cat { padding: var(--pa-s3); }
  .cr-bill-pm-field { grid-template-columns: minmax(0, 1fr); }
  .cr-bill-pm-fact { grid-template-columns: auto minmax(0, 1fr); }
  .cr-bill-pm-fact-v, .cr-bill-pm-src { grid-column: 2; }
  .cr-bill-pm-intake .pa-input, .cr-bill-pm-intake .pa-select { font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) { .cr-bill-pm-meter-bar span { transition: width .4s ease; } }