/* 07-narrow.css. MUST STAY LAST, AND MUST BE LINKED LAST. The narrow screen block below
   beats an equal specificity `white-space: nowrap` set in 03-forms.css on source order
   alone; loaded any earlier it applies its widths, fails to apply its wrapping, and clips
   "Saturday 5:00 PM Vigil". The role banner at the foot follows it in the original source
   order and stays here for that reason, not because it is narrow screen work. */

/* ---------------------------------------------------------------------------
   NARROW SCREENS. Last in the file on purpose. `table.entry th[scope="row"]`
   further up sets white-space: nowrap at exactly the same specificity as the
   rule below that clears it, so source order is the whole argument. Sitting
   earlier, this block applied its widths, did NOT apply its wrapping, and
   clipped "Saturday 5:00 PM Vigil" to "Saturday 5:00 PM Vi".
   --------------------------------------------------------------------------- */
/* The weekend sheet on a phone. Two numbers per Mass beside a Mass name is the
   paper sheet's own shape and it is worth keeping, so this narrows the parts
   rather than restacking the grid: the ministers read down a column, which is
   why the tab order walks down one, and a per-Mass card would break that
   reading as well as that typing.
   At 390px the sheet measured 588px wide and the offertory column sat entirely
   off the right edge, on the one screen the count team and the hospitality
   ministers actually use. */
@media (max-width: 480px) {
  /* Fixed layout, and the widths below are what make it right. Left to auto,
     the browser gives the name column its longest line as a minimum, which put
     the table back over the window even with wrapping allowed. Fixed reads the
     widths off the header row, so the two number columns are pinned and the
     name takes whatever is left and wraps into it. */
  table.entry { width: 100%; table-layout: fixed; }
  table.entry th[scope="col"], table.entry td, table.entry th[scope="row"] {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
  /* The Mass name WRAPS now instead of holding the column open on one line.
     Equal thirds was the first attempt and was wrong: a name needs more room
     than a number box, and fixed layout clipped "Saturday 5:00 PM Vigil" to
     "Saturday 5:00". The number columns are pinned instead and the name takes
     whatever is left. */
  table.entry td.mass, table.entry th.mass { white-space: normal; }
  table.entry th.mass strong { font-weight: 600; }
  /* The date can afford to be small: the page heading already says which
     weekend this is, and the day is in the Mass name. */
  table.entry th.mass span { font-size: var(--step--2); }
  table.entry td.count, table.entry th.count { width: 4.6rem; }
  table.entry td.money, table.entry th.money { width: 5.4rem; }
  table.entry td.count input, table.entry td.money input { width: 100%; }
  /* The dollar sign is decoration next to a field already in decimal mode, and
     it costs a character of a field somebody is typing money into. */
  table.entry .dollar { display: none; }
  /* The totals row carries a whole sentence per column at this width. */
  table.entry tr.totals .no-total { font-size: var(--step--2); }
  /* A recorded number is text standing where an input was, and it kept the
     input's old fixed minimum: 4.5rem plus a rem of padding, inside a column
     pinned to 4.6rem. On the single-Mass screen that put the table at 405px in
     a 390px window. It takes the column it sits in instead. Found by
     check_widths.py the first time that check ran against a database with
     numbers in it. */
  table.entry .recorded { min-width: 0; width: 100%; padding: 0.4rem 0.15rem; }
  /* The metric name on the single-Mass screen is a th[scope="row"] carrying no
     .mass class, so the wrapping rule above never matched it and "Mass
     attendance" held its column open on one line. Every row header wraps at
     this width; the weekend sheet's already did. */
  table.entry th[scope="row"] { white-space: normal; }
}


/* The ledger's pager. Two links and a position, because the only two moves
   anybody makes here are one step further back and one step forward.

   No rule above it any more. The border-top was drawn on both copies of the
   pager: on the one at the top of the list it landed between the column
   headings and the first entry and drew the exact line a row separator draws,
   which is half of why a pager read as data, and on the one below the card it
   doubled up with the card's own bottom border. The card's border does the
   separating on this page; the pager only needs air. */
.pager {
  display: flex; align-items: baseline; gap: 1rem;
  margin: 1.1rem 0 0;
}
.pager a { font-weight: 600; }
.pager-where { color: var(--muted); font-size: var(--step--1); }

/* The count sentence and the top pager, on one line above the card. They are
   the same fact from two directions, which slice of the record is on screen and
   how to reach the next one, so they belong beside each other rather than
   stacked, and above the numbers rather than among them. Under about 34rem they
   wrap to two lines and the count keeps the first one. */
.ledger-topbar {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.2rem 1.5rem;
  margin: 0 0 0.6rem;
}
.ledger-topbar .pager { margin: 0; }
.ledger-count { margin: 0; }


/* The emoji beside each of the other dashboards. Sized in em so it tracks the
   link rather than the root, and given its own gap because an emoji glyph
   carries almost no side bearing and butts straight into the first letter. */
.side-emoji { margin-right: 0.45rem; font-size: 0.95em; font-style: normal; }

/* ─── Wearing somebody else's role ───
   Loud on purpose, and never colour alone: an admin who forgets they are in
   here will report a bug about a screen that is behaving correctly, and these
   pages get printed in black and white. The word "looking" carries the meaning;
   the band carries the attention. Sticky, because the way out has to be reachable
   from the bottom of a long dashboard without scrolling back up. */
.pretend {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem;
  padding: 0.6rem 1rem;
  background: #fdf6ec;              /* the same warm ground .gapstrip uses */
  border-bottom: 3px solid var(--warn);
  color: var(--ink);
}
.pretend p { margin: 0; max-width: none; font-size: var(--step--1); }
.pretend form { margin: 0; margin-left: auto; }
.pretend button {
  font: inherit; font-size: var(--step--1); font-weight: 600;
  padding: 0.35rem 0.8rem; min-height: 2.2rem;
  border: 1px solid var(--ink); border-radius: 4px;
  background: #fff; color: var(--ink); cursor: pointer;
}
.pretend button:hover, .pretend button:focus-visible { background: var(--ink); color: #fff; }

@media print { .pretend { position: static; } }