/* Matching that learns (Payments -> Receivables, 2026-10-26; key qbLearnMatch). Reuses the card-charges row / pill / tab classes (css/qb-cards.css)
   and adds only what money-in needs: suggestion buttons under a row and the rules list. Theme tokens only (day + night). 44px targets. */
#ar-qblearn-wrap { --qbc-amber: #b7791f; --qbc-green: #1f8a4c; --qbc-grey: #7a8494; margin: 24px 0; }
html[data-remodel-mode="night"] #ar-qblearn-wrap { --qbc-amber: #e0a33a; --qbc-green: #4cc282; --qbc-grey: #9aa3b2; }
#ar-qblearn-wrap[hidden] { display: none !important; }
html body #ar-qblearn-wrap .wf-kpi-rail.qbc-kpis { display: flex; margin: 0 0 16px; }
@media (min-width: 601px) {
  /* U1 (final-fix 2026-10-27): never pillars. Each card keeps the thin card's own wide basis and only GROWS to fill a wide page;
     where four do not fit (the Fold at 984, 162x174 pillars before) the rail slides as one row, like every wf-kpi-thin rail. */
  html body #ar-qblearn-wrap .wf-kpi-rail.qbc-kpis { --wf-kpi-cap: none; --wf-kpi-basis: min(max(240px, 15rem), 100%); }
  html body #ar-qblearn-wrap .wf-kpi-rail.qbc-kpis > .pay-kpi { flex: 1 0 var(--wf-kpi-basis) !important; min-width: var(--wf-kpi-basis) !important; max-width: none !important; }
}
html body #ar-qblearn-wrap .qbc-kpis .pay-kpi { cursor: pointer; }
html body #ar-qblearn-wrap .qbc-kpis .pay-kpi.is-on { border-color: var(--gold); }
html body #ar-qblearn-wrap .wf-kpi-rail.qbc-kpis .pay-kpi-sub, html body #ar-qblearn-wrap .wf-kpi-rail.qbc-kpis .pay-kpi-footer { white-space: normal !important; overflow-wrap: anywhere; text-overflow: clip; display: block !important; }

/* suggestions: a full-width strip under the row, one 44px button per invoice / watch purchase */
.qbl-sugs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.qbl-sugs:empty { display: none; }
.qbl-sug { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 44px; height: auto; padding: 6px 14px; white-space: normal; text-align: left; max-width: 100%; line-height: 1.25; }
.qbl-sug-s { font-size: 12px; font-weight: 400; color: var(--muted); }
.qbc-c-amt .qbc-act { margin-top: 2px; }
.qbl-rules-note { padding: 12px 18px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--border); }
@media (max-width: 640px) {
  .qbl-sug { width: 100%; }
}
/* the same rules list on Statement lines (public/js/bank-csv.js) */
#bsl-learn-rules { --qbc-amber: #b7791f; --qbc-green: #1f8a4c; --qbc-grey: #7a8494; }
html[data-remodel-mode="night"] #bsl-learn-rules { --qbc-amber: #e0a33a; --qbc-green: #4cc282; --qbc-grey: #9aa3b2; }
.bsl-learn { margin-top: 24px; }
/* KPI text never clipped (KPI law): on touch widths the thin card's value box is 22px tall for 20px text with overflow hidden, and the
   uppercase labels run past a 172px card. Inside this section only: the value gets room, and labels / subs wrap. */
html body #ar-qblearn-wrap .wf-kpi-rail.qbc-kpis .pay-kpi-value { line-height: 1.3 !important; overflow: visible !important; height: auto !important; }
html body #ar-qblearn-wrap .wf-kpi-rail.qbc-kpis .pay-kpi-label { white-space: normal !important; overflow-wrap: anywhere; overflow: visible !important; text-overflow: clip !important; }
html body #ar-qblearn-wrap .wf-kpi-rail.qbc-kpis .pay-kpi > * { min-width: 0; }

/* U1 (final-fix 2026-10-27): a label wraps between words only, never inside one ("ONLY IN QUICKBOOK / S" on the Fold). */
html body #ar-qblearn-wrap .wf-kpi-rail.qbc-kpis .pay-kpi-label { white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; overflow: visible !important; text-overflow: clip !important; }