/* 06-ledger.css. The ledger: its filter, the column template shared by the header and
   every row, the badges, the open editor, the pager, and the dashboard chooser. */

/* ==========================================================================
   The ledger. Every number, and the place a wrong one gets put right.
   ==========================================================================
   Rows are rows. The editor opens on the row being fixed rather than sitting
   open on all two hundred of them, which is what made this page a wall of input
   boxes with the data as the smallest thing on it. */
.ledgerfilter {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
  margin: 0 0 1.2rem;
}
.ledgerfilter label { display: flex; flex-direction: column; gap: 0.25rem;
                      margin: 0; font-size: var(--step--2); color: var(--muted); }
.ledgerfilter select { min-width: 12rem; }

.ledger { border: 1px solid var(--line); border-radius: 8px; background: #fff;
          overflow: hidden; }

/* One column template, used by the header and by every row's summary, so the
   two cannot drift apart. */
.ledger-head, .ledger-row > summary {
  display: grid;
  /* THE SHARES BELOW ARE MEASURED, not guessed. At 1440 the ledger is 1080px
     wide, and after the padding, the six gaps and the fixed control there are
     873px for the six flexible columns. What each one actually has to hold, at
     the size it holds it: the longest metric label, "Offertory in LGL, cash and
     check", is 264px; a date is 147px and the Mass under it, "Saturday 5:00 PM
     Vigil", is 163px; the widest money value is 97px; a name is 107px; "416
     days later" is 100px; "live" beside "edited" is about 107px. The fractions
     hand every column its measurement plus a few pixels, and the surplus goes
     to the label, which is the only one of the six whose content grows when
     somebody adds a metric to the registry.

     The old 2.2/1.3/0.7/0.9/0.7/0.9 gave the label 290px and the lag 92px, so
     the label wrapped as soon as a period phrase followed it and "416 days
     later" wrapped on every annual row. Both defects were a column measured by
     eye against content nobody had measured.

     Minimums in rem, against an 18pt root, so these are far bigger than they
     read. They are what the columns fall back to between 1440 and the 60rem
     breakpoint below, where there is not enough room for all seven to have what
     they want. The first version summed to 50rem, wider than the 80vw column,
     and the row overflowed: the Edit control was pushed off the right edge of
     the card and could not be clicked. The set after that summed to 32.9rem,
     which is 725px once the gaps and the padding are counted, and still
     overflowed the 697px ledger of a 961px window, the narrowest one this grid
     is ever used at, where `overflow: hidden` on the card silently clipped the
     right-hand end of every row. These sum to 30.7rem, 553px, which leaves that
     window 11px of room.

     The value column's minimum is the odd one out and it is deliberate: a label
     or a name or a date can wrap when a column gets tight, and "$12,860.56"
     cannot, so a column narrower than the widest amount this ledger holds does
     not wrap the number, it clips a digit off the end of it. 5.6rem is that
     widest amount, measured, plus a little. Six figures would need this raised
     again. */
  grid-template-columns:
    minmax(6rem, 2.2fr)     /* what */
    minmax(5rem, 1.35fr)    /* when */
    minmax(5.6rem, 0.8fr)   /* value */
    minmax(3.6rem, 0.9fr)   /* who */
    minmax(3rem, 0.82fr)    /* lag */
    minmax(3.4rem, 0.9fr)   /* status */
    4.1rem;                 /* the control, sized in the .open rule below */
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.7rem 1rem;
}
.ledger-head {
  background: var(--parchment);
  border-bottom: 1px solid var(--line);
  font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.ledger-row { border-bottom: 1px solid var(--line); }
.ledger-row:last-child { border-bottom: 0; }
.ledger-row > summary { cursor: pointer; list-style: none; }
.ledger-row > summary::-webkit-details-marker { display: none; }
.ledger-row > summary:hover { background: var(--parchment); }
.ledger-row > summary:focus-visible { outline: 2px solid var(--emerald);
                                      outline-offset: -2px; }

/* A ROW IS A TWO-LINE BOX, and the second line is reserved whether or not
   anything fills it. Left to its content, a row was one line tall when the
   metric was called "Confessions" and two when it was called "Offertory in LGL,
   cash and check", because the period phrase after the label ran past the
   label's column and wrapped. Every second row in the list was then a different
   height from the one above it, and a list whose rhythm changes with the length
   of a name reads as a broken table rather than as a list.

   Two body line boxes plus the summary's own vertical padding. Two lines is
   what the tallest ordinary row needs, a fact and its qualifier, so reserving
   the second one costs nothing on the rows that only use one, and it also
   absorbs the cases the columns cannot be sized against in advance: a person
   with a long name, a lag that runs to two lines. Written off the scale rather
   than as a pixel count so it follows the type if the type ever moves. */
.ledger-row > summary { min-height: calc(2 * 1.55 * var(--step-0) + 1.4rem); }

/* The qualifier under a fact is a SECOND LINE, not the tail of the first one.
   Inline, the period phrase, the Mass and the correction reason each ran on
   from the thing they belong to and broke wherever the column happened to end,
   which is what decided a row's height. On its own line each one reads as what
   it is, and it lands on the line the box above already reserved. `.muted`
   already takes them a step down; nothing here sets a size. */
.ledger-row .what > .muted,
.ledger-row .when > .muted,
.ledger-row .state > .muted { display: block; }
.ledger-row .num, .ledger-head .num { text-align: right; }
/* NOT .who: that class is the masthead's name, painted gold-sand for the navy
   bar, and reusing it here printed the name in pale gold on white. */
.ledger-row .by { color: var(--ink); }
/* A "never counted" row carries a badge where a number goes, and the badge is
   wider than any amount: 142px of nowrap capitals in a column sized for
   "$12,860.56", so 41px of it lay across the name in the column beside it. It
   wraps inside its own column instead. The badge is then two lines deep, and an
   inline-block takes its baseline from its LAST line, so a wrapped badge would
   drag the whole row down behind it; this column steps out of the row's
   baseline to stop that. Every other value here is a single line of digits at
   body size, whose baseline sits in the same place under either alignment, so
   nothing else moves. Those rows are still the tallest on the page, and that is
   not this: a closed gap also prints the reason it was closed, which is a
   second sentence no other row carries. */
.ledger-row .value { font-weight: 600; font-variant-numeric: tabular-nums;
                     align-self: start; }
.ledger-row .value .not-counted { white-space: normal; }
.ledger-row .open {
  text-align: right; color: var(--emerald); font-weight: 600; font-size: var(--step--1);
  /* The caret is generated content introduced by a space, and a space is a
     break opportunity. In a 3.4rem column, 61px, "Details" measured 52px and
     the caret another 11, so the triangle dropped onto a line of its own
     underneath the word and the last column read as "Details" with a lonely
     arrow below it. "Edit" is short enough that it never showed the fault. The
     column is 4.1rem now, which clears the longer of the two words with its
     caret, and this keeps word and arrow together whatever is put in here
     next. */
  white-space: nowrap;
}
.ledger-row[open] > summary { background: var(--parchment); }
.ledger-row[open] .open::after { content: " \25b4"; }
.ledger-row:not([open]) .open::after { content: " \25be"; }
.ledger-row.superseded .value, .ledger-row.voided .value { text-decoration: line-through; }
.ledger-row.superseded, .ledger-row.voided { color: var(--muted); }

.pill {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
  font-size: var(--step--2); font-weight: 600; white-space: nowrap;
}
.pill-active { background: #e4efe8; color: var(--emerald); }
.pill-superseded { background: #efe9dc; color: var(--warn); }
.pill-voided { background: #f4e2e0; color: var(--danger); }
/* A closed gap is a settled fact, not a verdict on a number, so it wears the
   neutral ink on the page's own line colour rather than joining the good,
   caution and bad scale the three above it form. Ink on that ground measures
   9.86:1. Without a rule of its own it drew as bare text beside real pills and
   read as though the row had no status at all. */
.pill-not_counted { background: #eae5d6; color: var(--navy); }

/* AN ESTIMATE IS NOT A COUNT, and the difference has to survive a black and
   white printout carried into a meeting, so it is said in a word rather than
   shown in a colour. The figure keeps its size, because it is a real answer to
   a real question; the word beside it is what stops it being read as measured. */
.estimate { font-weight: 600; font-style: italic; }
.estimate-mark {
  display: inline-block; margin-left: 0.45rem;
  font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--warn); border: 1px solid var(--warn); padding: 0.1rem 0.3rem;
  vertical-align: 0.1em;
}
table.entry.estimated th[scope="row"] { font-weight: 400; }
.pill-edited { background: #efe9dc; color: var(--warn); }

.ledger-edit {
  padding: 0.4rem 1rem 1.3rem;
  background: var(--parchment);
  border-top: 1px dashed var(--line);
}
.ledger-edit h3 { font-size: var(--step--1); margin: 1rem 0 0.15rem; }
.ledger-edit form + form { border-top: 1px solid var(--line); margin-top: 1.1rem; }
.ledger-edit .entryrow { margin-top: 0.5rem; }
.ledger-edit .entryrow .grow { flex: 1 1 18rem; }
.ledger-edit button.danger { background: var(--danger); }
.ledger-meta {
  display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.9rem;
  margin: 1.1rem 0 0; font-size: var(--step--1);
}
.ledger-meta dt { color: var(--muted); }
.ledger-meta dd { margin: 0; }

/* The whole grid collapses to labelled lines on a narrow screen: seven columns
   in 390px is seven columns nobody can read. */
@media (max-width: 60rem) {
  .ledger-head { display: none; }
  .ledger-row > summary {
    grid-template-columns: 1fr auto;
    gap: 0.2rem 0.8rem;
    padding: 0.9rem 1rem;
  }
  .ledger-row .what { grid-column: 1; font-weight: 600; }
  .ledger-row .open { grid-column: 2; grid-row: 1; }
  /* .by, not .who. The rule above this block already says why the ledger's
     name column cannot be called .who, and this line was never updated with it,
     so it matched nothing: the name fell to auto-placement, landed in column 2
     beside the value, and read on a phone as though "Carlli Kloss" were part of
     the figure rather than the person who typed it. */
  .ledger-row .when, .ledger-row .by, .ledger-row .lag { grid-column: 1; }
  .ledger-row .value { grid-column: 1; font-size: var(--step-1); text-align: left; }
  .ledger-row .state { grid-column: 1; }
}

/* Supporting prose inside a card sits a step below body. It is there for the
   reader who doubts a number, and it was competing with the number itself. */
body.dash .card p,
body.dash .entrybox p { font-size: var(--step--1); line-height: 1.55; }
body.dash .card p.total { font-size: var(--step-3); }
body.dash .blurb { font-size: var(--step-0); }

/* A Mass name in an entry row is a label, not a headline. It was set at body
   size beside a card title barely larger than it. */
.entrybox table.entry th { font-size: var(--step--1); font-weight: 600; }
.entrybox table.entry td { font-size: var(--step-0); }

/* A caveat that belongs to a number, kept next to it and out of the way. It was
   four lines of body prose sitting between the figures and the chart. */
.aside { margin: .6rem 0 1.2rem; }
.aside > summary {
  cursor: pointer;
  font-size: var(--step--1);
  color: var(--muted);
  list-style: none;
}
.aside > summary::-webkit-details-marker { display: none; }
.aside > summary::after { content: " \25be"; }
.aside[open] > summary::after { content: " \25b4"; }
.aside > summary:hover { color: var(--ink); }
.aside p { font-size: var(--step--1); color: var(--muted); margin: .5rem 0 0; }




/* A row that is part of the row above it. Overall Baptisms is infant plus
   over-7; printed flat, the three read as three separate sacraments and the
   year's baptisms look like twice what they were. The rule is the indent plus
   a light left edge, so the relationship survives being read quickly and
   survives being printed in black and white. */
tr.is-part > td:first-child,
tr.is-part > th:first-child {
  padding-left: 1.6rem;
  position: relative;
  color: var(--muted);
}
tr.is-part > td:first-child::before {
  content: "";
  position: absolute;
  left: 0.55rem; top: 0.1em; bottom: 0.45em;
  border-left: 2px solid var(--line);
}