/* 08-countsheet.css. THE WEEKEND COUNT SHEET, AND NOTHING ELSE.
   ---------------------------------------------------------------------------
   Isolated on 2026-08-26, after D81 took this screen from two money columns per
   Mass to five and the shared `table.entry` rules could not carry it. Eric,
   looking at the result at about 1040px: "This is fucccccccccccccking garbage."
   He was right. The Mass name was pinned `nowrap` by 03-forms.css, the column
   widths were pinned by 07-narrow.css, and the fix for one kept being undone by
   the other on specificity. "Saturday 5:00 PM Vigil" ran straight under the
   attendance figure and the untied row ran under the Mass names.

   THE TABLE HERE IS `table.countsheet`, NOT `table.entry`. That is the whole
   point of this file: no rule in 03-forms.css or 07-narrow.css matches it, so
   nothing in either can reach in and undo something here, and nothing here can
   reach the single-Mass screen or the year grid, which still use `table.entry`
   and are still two columns wide. Everything this screen needs is below, in one
   place, including the few shared looks it borrows.

   MOBILE FIRST, and the table is the exception rather than the default. The
   cards work at every width; the table is only switched on where there is
   genuinely room for seven columns, which measured out at 1100px of viewport.
   The old arrangement assumed a 1440px window and fell apart at 1040px, which
   is a laptop, which is what Eric is on.
   --------------------------------------------------------------------------- */

table.countsheet {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2rem;
  font-variant-numeric: tabular-nums;
}
table.countsheet th { text-align: left; }
table.countsheet .recorded { font-weight: 600; }
table.countsheet .no-total {
  display: block; font-size: var(--step--1); font-weight: 400; color: var(--warn);
}
/* Which line you are on, working down the sheet by keyboard. */
table.countsheet tr:focus-within { background: #faf7ee; }

/* ─── The default: a card per Mass ─────────────────────────────────────────
   A card IS a line of the count sheet. The label sits beside the box it names,
   so a person typing is looking at the words "Envelope cash" while they type
   into it: the row-wise typing bug that put an attendance figure of 350 into
   the Vigil offertory box needed bare boxes under headings a row away, and
   there are none here. */
table.countsheet, table.countsheet tbody, table.countsheet tr,
table.countsheet td, table.countsheet th { display: block; width: auto; }

table.countsheet thead {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

table.countsheet tbody tr {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 0.55rem 0.75rem 0.7rem; margin: 0 0 0.7rem; background: #fff;
}

table.countsheet th.mass {
  padding: 0 0 0.5rem; border-bottom: 1px solid var(--line);
  margin: 0 0 0.5rem; white-space: normal;
}
table.countsheet th.mass strong { font-weight: 600; }
table.countsheet th.mass span { display: block; font-size: var(--step--2);
                                color: var(--muted); }

table.countsheet tbody td {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.22rem 0; text-align: left;
}
table.countsheet tbody td::before {
  content: attr(data-label);
  flex: 0 0 7.5rem; font-size: var(--step--1); color: var(--muted);
}
table.countsheet tbody td input { flex: 1 1 auto; width: auto; min-width: 0; }
table.countsheet tbody td .recorded,
table.countsheet tbody td .muted { flex: 1 1 auto; min-width: 0; }

/* The offertory: the sum of the four above it, and the one cell with no box.
   Set off by a rule so a reader can see which figures were typed and which one
   was worked out. */
table.countsheet td.derived {
  border-top: 1px solid var(--line); margin-top: 0.4rem;
  padding-top: 0.45rem; font-weight: 600;
}
table.countsheet td.derived::before { color: var(--ink); }
table.countsheet td.derived .part {
  font-weight: 400; font-size: var(--step--2); color: var(--muted);
}

/* The money that came in at no Mass. Its own card, and its cells stack like
   every other cell rather than lining up under the Masses: there is no Mass for
   it to line up with, and lining it up invites a reader to add it into the
   column above. */
table.countsheet tr.untied td { display: block; padding: 0; }
table.countsheet tr.untied td::before { content: none; }
.untied-cells { list-style: none; margin: 0; padding: 0; }
.untied-cells li {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.22rem 0;
}
.untied-label { flex: 0 0 7.5rem; font-size: var(--step--1); color: var(--muted); }
.untied-cells input { flex: 1 1 auto; width: auto; min-width: 0; }
.untied-cells .recorded { flex: 1 1 auto; min-width: 0; }
.untied-sum { margin: 0.5rem 0 0; font-size: var(--step--1); color: var(--muted); }

table.countsheet tr.totals {
  border: 0; border-top: 2px solid var(--navy); border-radius: 0;
  background: transparent; padding: 0.7rem 0.75rem 0; margin-top: 0.2rem;
}
table.countsheet tr.totals th { padding: 0 0 0.35rem; }
table.countsheet tr.totals td { display: flex; padding: 0.1rem 0; }
table.countsheet tr.totals .no-total { font-size: var(--step--1); }
/* SAID ONCE, NOT SIX TIMES. In a card the six cells of the totals row sit under
   one another, and while the weekend is short they all carry the same sentence:
   "3 of 5 entered, no total" printed six times down the screen. The set is the
   Masses, so it is one fact about the weekend rather than six about the
   columns. Once the weekend IS complete each cell carries its own figure, no
   cell has a `.no-total` in it, nothing matches this, and all six show. */
table.countsheet tbody tr.totals td:not(:first-of-type):has(.no-total) { display: none; }

/* ─── ONE LAYOUT, AT EVERY WIDTH ───────────────────────────────────────────
   There was a table above 1100px for about twenty minutes and it went in front
   of Eric broken twice: once with the Mass name printing under the attendance
   figure, and once with the headings in a row and every cell stacked under the
   first column. Both were the same fault. Rebuilding a table out of elements
   this file has already set to `display: block` means every rule needs an
   override at matching specificity, and each miss is invisible until something
   is rendered at the one width that shows it.

   The cards ARE the sheet. A count sheet is a list of Masses with amounts
   written beside them, and that is what a card is; the table was density for
   its own sake. One layout means no breakpoint to get wrong, no second set of
   rules to keep in step, and the thing Eric sees on a laptop is the thing that
   was looked at on a phone.

   Capped, because a 1400px-wide card puts the label at one edge of the screen
   and the box it names at the other. 52rem is about the width the five figures
   and their labels actually need.
   --------------------------------------------------------------------------- */
table.countsheet { max-width: 52rem; }

@media (min-width: 900px) {
  /* A little more room for the numbers once there is room to give. */
  table.countsheet tbody td::before,
  .untied-label { flex-basis: 10rem; }
  table.countsheet tbody td { padding: 0.3rem 0; }
}