/* WHAT HAPPENED — ONE money breakdown, shared (Peter, 17 Sep 2026: "reuse the same tech that we
   use for the What happened, that comes from the projects folder, use the same thing for the loans,
   hashtags etc."). The VAT-return review anatomy: a record card, a summary sentence, then Money in /
   Money out sections whose rollup cards expand to every item so counts and money reconcile exactly,
   and the Card ⇄ Grid lens (Bank's .view-toggle, data-grid.css) swapping the sections for one
   sortable read-only table. JS: src/js/what-happened.js (window.bulletWhatHappened.mount).
   Lifted from project-detail.html, which now consumes it too. Needs row-card.css, section-title.css,
   data-grid.css on the page. */
.vat-card { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); padding: 24px; display: flex; flex-direction: column; gap: 32px; }
.vat-section { display: flex; flex-direction: column; gap: 16px; }
/* section heading carries the count + total, then the caret (global .section-title chip) */
.section-title .tax-secamt { margin-left: 4px; font-weight: var(--weight-regular); }
.section-title[aria-expanded="false"] ~ .rows { display: none; }
/* rollup group — 'show all' row expands to reveal the rest */
.rollup { display: block; }
.rollup__body { list-style: none; margin: 12px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rollup__body .row-card { margin: 0; }
.rollup__more { color: var(--color-text-muted); font-size: var(--text-base); padding: 2px 4px 0; }
/* "+ N more" is a real toggle, not a dead label (vat-return-detail's .js-more) */
.rollup__more .js-more { background: none; border: none; padding: 0; margin: 0; font: inherit;
  color: var(--color-text-muted); cursor: pointer; text-align: left; }
.rollup__more .js-more:hover { color: var(--color-text); text-decoration: underline; }
/* head row: the section title left, the Card ⇄ Grid lens right */
.pjw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* long item descriptions crop instead of wrapping the row; an item can carry a quiet second
   line (the account, the loan split) under its description */
.pjw-desc { flex: 0 1 auto; min-width: 0; max-width: 62%; display: flex; flex-direction: column; gap: 2px; }   /* capped so a long line crops and the row never wraps */
.pjw-desc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pjw-sub { color: var(--color-text-muted); font-size: var(--text-sm); }
/* NOTHING IS CUT OFF (Peter, 25 Sep: "the description truncates and I can't see the rest"). The quiet
   second line (the running balance, the loan split) WRAPS in both lenses; in the grid it drops to its
   own line under the description instead of running on beside it and being cropped. */
.pjw-desc > .pjw-sub { white-space: normal; overflow: visible; }
/* `.data-grid tbody td` sets nowrap and outranks a bare class, so the grey line spilled over the Source
   column (Mariana, 28 Sep); the extra specificity is what lets it wrap */
.data-grid tbody td.pjw-gdesc { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.pjw-gsub { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-regular); }
/* the two money sections keep the record card's 32px rhythm; [hidden] must
   still win over the explicit display (the grid lens swaps them out) */
.pjw-cards { display: flex; flex-direction: column; gap: 32px; }
.pjw-cards[hidden], .pjw-grid[hidden] { display: none; }
/* the grid sits inside the record card — no bulk bar here, so no 88px clearance */
.pjw-grid .data-grid__wrap { margin-bottom: 0; }