/* GENERATED from design/ledgerCard/ledgerCard.css by design/syncDesign.mjs --write. Do not edit here: edit design/ and run --write. */
/* THE LEDGER CARD: kind 4 of design/cardsAndInfographics.md, rules in design/transactionCards.md. ONE stylesheet for every card that lists rows (transactions, history, logs), in every app.
   Source: design/ledgerCard/ledgerCard.css. Each app gets a generated copy (ledgerCard.css) and never edits it; the design check fails on a stale copy or on an app writing a rule for these parts.
   It was extracted from Muscle's Steps History (.card.log-card.hist-card, the model, owner), generalised from that card's fixed columns to any columns.

   THE PARTS (built by ledgerCard.mjs, never written by hand):
     .ledger-card         the card: content-sized (rule 1), a container (the card's OWN width switches the columns, rule 7), no left, right or bottom padding (rule 10), square bottom corners (rule 12)
       .lc-title-row      the heading row: the title CENTRED in the middle of the card, the one corner control at the right (rule 11, 15)
       .lc-head           the header row: one cell per column, each its own hairline box, heavier than the data cells (rule 9)
         span[data-col]
       .lc-row            a row: the same columns, the same grid, no gap between columns (rule 9)
         .lc-cell[data-col]
       .lc-empty          the empty state: one row saying what is missing (rule 16)
   COLUMNS: every cell carries data-col; the ones that matter on a phone also carry data-keep. The card's own width under 560px (a container query, never the screen's) draws ONLY the kept ones, on
   --lc-narrow; the rest are not drawn at all (rule 13). --lc-wide and --lc-narrow are the grid templates, set on the card by the helper.
   A ROW MAY CARRY ONE COLOURED MARK before the text of one cell: mark: { col, color } in the row (a dot, 8px).
   ROW STATE is colour alone (rule 17): .held and .pending are muted, .today is full ink. Money in a cell: add class money (Kanit, typography.md rule 1).
   What an app still owns: the page grid placement (a ledger card goes last in its group, two columns from 900px, reserved in whole card units: rules 5, 6, 8) and --lc-inset at its breakpoints
   and --lc-top (the card's own side and top padding elsewhere: the title row and the empty row keep that inset while the sheet is flush). */
:where(.ledger-card) { --lc-inset: var(--card-title-inset); --lc-top: var(--card-title-inset); }      /* defaults with NO specificity, so an app's own value at a breakpoint wins */
.ledger-card.ledger-card {
  height: auto;
  flex: 0 0 auto;
  container-type: inline-size;
  container-name: ledger;
  --ledger-row: 44px;
  --ledger-header-h: 42px;
  padding: var(--lc-top) 0 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* The heading row: the title in the middle of the card, the control the card holds at the top left, the redirect at the top right, ALL ON ONE LINE (owner: they sat on two rows, the toggle lower than
   the title; found by measuring the grid: an item placed in column 1 AFTER the title in column 2 is pushed to the next row by auto-placement, so every item is pinned to row 1). Never distorted: the left
   control (a toggle, a chip) keeps its own width, the title is the one thing that gives way (an ellipsis), and the title is never hidden.
   WHAT FITS (measured at the card's own type; the row's content is the card width less 49px: 321px on a 402px phone, 279px on a 360px one):
     the left control   at most 3 options, each label short: Today | 7d 71px, Today | 7 days 91px, Today | 3d | 7d 95px. Longer ones (Today | Week | Month, 129px) do not belong in a heading.
     the title          one to two words, at most 12 characters (Transactions, 94px; Readings, 68px; Meals, 44px).
   A centred title needs  title + 2 x the left control  to fit the row: 94 + 2 x 95 = 284px, so on a 360px phone it just does, on a 320px one it does not, and the fallback below takes over. */
.ledger-card > .lc-title-row {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(var(--card-head-h), 1fr);
  column-gap: var(--card-detail-gap);
  align-items: center;
  height: var(--card-head-h);
  margin: 0 0 var(--card-box-gap);
  padding-inline: var(--lc-inset);
}
.ledger-card > .lc-title-row > * { grid-row: 1; }
.ledger-card > .lc-title-row > :first-child { grid-column: 2; justify-self: center; text-align: center; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* THE CORNERS (transactionCards.md rule 15, owner): the top right is the redirect icon and nothing else; whatever else the heading holds (a toggle, a chip, a count, "Last 7 days") is at the top left. */
.ledger-card > .lc-title-row > .card-redirect { grid-column: 3; justify-self: end; }
.ledger-card > .lc-title-row > :not(:first-child):not(.card-redirect) { grid-column: 1; justify-self: start; min-width: max-content; white-space: nowrap; }
/* A NARROW CARD (under 300px: a 320px phone): a centred title would not fit beside the control, so the title takes the room that is left, between the control and the redirect, still visible and still centred in it. */
@container ledger (max-width: 299.98px) {
  .ledger-card > .lc-title-row { grid-template-columns: auto minmax(0, 1fr) var(--card-head-h); }
}
.ledger-card .card-redirect { display: inline-flex; align-items: center; justify-content: center; width: var(--card-head-h); height: var(--card-head-h); padding: 0; border: 0; background: none; color: var(--muted); }
.ledger-card button.card-redirect { cursor: pointer; }
.ledger-card button.card-redirect:hover { color: var(--ink); }

/* The sheet: a header and rows on ONE column grid, no gap between columns, every cell its own hairline box (data cell 0.25px at half ink, header cell 1.5px at three quarters), 3.75px corners,
   10px of padding each side, text centred, rows at least 44px, the header 42px, a faint wash under the pointer. They are Wad's expanded ledger's numbers (.ledger-head / .lrow). */
.ledger-card .lc-head, .ledger-card .lc-row {
  display: grid;
  grid-template-columns: var(--lc-wide);
  column-gap: 0;
  align-items: stretch;
  padding: 0;
  border: 0;
  min-height: var(--ledger-row);
}
.ledger-card .lc-head { min-height: var(--ledger-header-h); margin: 0; }          /* the header meets the first row with NO gap */
.ledger-card .lc-head > span {
  position: relative;
  z-index: 1;
  height: var(--ledger-header-h);
  line-height: calc(var(--ledger-header-h) - var(--ledger-head-line) * 2);
  margin: 0;
  padding: 0 10px;
  min-width: 0;
  text-align: center;
  justify-self: stretch;
  border: var(--ledger-head-line) solid rgba(var(--ink-rgb), var(--ledger-line-a));
  border-radius: var(--ledger-head-radius);
  font-family: 'Kanit', sans-serif;          /* a ledger is Kanit 300 throughout, its column names too (owner: "a ledger, card or page, always uses Kanit") */
  font-size: var(--ledger-head-size);
  font-weight: 300;
  letter-spacing: var(--ledger-head-tracking);
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ledger-card .lc-row > .lc-cell {
  display: block;
  margin: 0;
  padding: 0 10px;
  min-width: 0;
  text-align: center;
  justify-self: stretch;
  line-height: var(--ledger-row);
  border: var(--ledger-line-w) solid rgba(var(--ink-rgb), var(--ledger-line-a));
  border-radius: 3.75px;
  font-family: 'Kanit', sans-serif;          /* EVERY cell, not only the money: the same face and weight as Wad's transaction ledger (Kanit 300, owner); the headings stay the page's own face */
  font-size: var(--ledger-cell-size);
  font-weight: 300;
  letter-spacing: var(--ledger-cell-tracking);
  text-transform: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A cell whose content is a node (a checkbox, a dot and a name): centred in the cell, never wider than it. */
.ledger-card .lc-row > .lc-cell.node { display: flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.2; }
.ledger-card .lc-row > .lc-cell.node > * { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ledger-card .lc-row > .lc-cell.marked::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--lc-mark); vertical-align: middle; }     /* a row's one coloured mark (Muscle: an alcoholic entry) */
.ledger-card .lc-row.held > .lc-cell, .ledger-card .lc-row.pending > .lc-cell { color: var(--muted); }
.ledger-card .lc-row.today > .lc-cell { color: var(--ink); }
.ledger-card .lc-row[role="button"] { cursor: pointer; }
.ledger-card .lc-row[role="button"]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (hover: hover) { .ledger-card .lc-row:hover { background: rgba(var(--ink-rgb), .035); } }

/* The empty state: still a card, still its heading and its header; one row saying what is missing. */
.ledger-card .lc-empty { padding: var(--card-box-gap) var(--lc-inset); text-align: center; font-family: 'Kanit', sans-serif; font-size: var(--t-d1); font-weight: 300; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* A phone, or any narrow slot: the same sheet with only the columns that matter. The rest are NOT DRAWN (not shortened, not stacked). The card's own width decides, never the screen's. */
@container ledger (max-width: 559.98px) {
  .ledger-card .lc-head, .ledger-card .lc-row { grid-template-columns: var(--lc-narrow); }
  .ledger-card [data-col]:not([data-keep]) { display: none !important; }          /* !important: a node cell (display:flex) must not out-rank "not drawn at all" */
}