/* Classes to QuickBooks (QuickBooks page, 2026-10-27; key qbClassRef). Reuses the card-charges row / pill / tab classes (css/qb-cards.css)
   and adds only the section spacing and the picker. Theme tokens only (day + night). 44px targets. */
#qbcl-wrap { --qbc-amber: #b7791f; --qbc-green: #1f8a4c; --qbc-grey: #7a8494; margin: 0 0 16px; }
html[data-remodel-mode="night"] #qbcl-wrap { --qbc-amber: #e0a33a; --qbc-green: #4cc282; --qbc-grey: #9aa3b2; }
#qbcl-wrap[hidden] { display: none !important; }
#qbcl-wrap .qbc-c-qb { gap: 4px; }
#qbcl-wrap .qbcl-pick { width: 100%; max-width: 360px; min-height: 44px; }
#qbcl-wrap .qbc-c-amt { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
#qbcl-wrap .qbc-c-amt .qbc-act[hidden] { display: none; }
@media (max-width: 900px) {
  #qbcl-wrap .qbc-row { grid-template-columns: minmax(0, 1fr); }
  #qbcl-wrap .qbc-row .qbc-c-qb { grid-column: 1; grid-row: auto; }
  #qbcl-wrap .qbc-row .qbc-c-amt { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  #qbcl-wrap .qbcl-pick { max-width: none; }
}
@media (max-width: 640px) {
  #qbcl-wrap .qbcl-tabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  #qbcl-wrap .qbcl-tabs .inv-kind-tab { justify-content: center; white-space: normal; text-align: center; line-height: 1.2; min-height: 44px; }
  #qbcl-wrap .qbc-c-amt .qbc-act { flex: 1 1 auto; }
}
/* the one-line summary bar (always shown when the key is on) and the body that opens under it */
#qbcl-wrap .qbcl-bar { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 18px; min-height: 64px; } /* the button sits under the title: the page's fixed eye / bell icons never cover it */
#qbcl-wrap .qbcl-bar-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#qbcl-wrap .qbcl-title { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--white); }
#qbcl-wrap .qbcl-toggle { flex: 0 0 auto; }
#qbcl-wrap .qbcl-body { border-top: 1px solid var(--border); padding: 16px 18px 0; }
#qbcl-wrap .qbcl-sub { margin: 0 0 12px; }
#qbcl-wrap .qbcl-list { margin: 0 -18px; border-top: 1px solid var(--border); }
#qbcl-wrap .qbcl-tabs { margin: 0 0 12px; }
@media (max-width: 640px) {
  #qbcl-wrap .qbcl-bar { align-items: stretch; }
  #qbcl-wrap .qbcl-toggle, #qbcl-wrap .qbc-c-amt .qbc-act { width: 100%; justify-content: center; text-align: center; }
}