/* The elders' page. Letter, portrait, greyscale, one sheet.
 *
 * Paper is the target and the screen is the preview, which inverts this
 * project's usual priority and is why this file does not use the app.css
 * tokens: those carry a dark theme, and there is no dark theme on paper. A
 * page that inherited them would print white-on-black or, worse, print the
 * light values while being authored against the dark ones.
 *
 * So everything here is ink on white, stated once and used in both media. The
 * only colours are black, three greys and the white of the sheet.
 *
 * Nothing on this page is told apart by hue. The two chart series differ by
 * stroke weight and dash, the emphasised budget row by a rule and a tint that
 * both survive a fax machine. Acceptance 2 is a person's judgement with a
 * greyscale printout in hand, but it is cheaper to design for than to retrofit.
 */

@page {
  size: letter portrait;
  margin: 0.5in;
}

:root {
  --ink: #000;
  --mid: #444;
  --soft: #666;
  --rule: #bbb;
  --tint: #f0f0f0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 10pt/1.35 Georgia, "Times New Roman", serif;
}

.sheet {
  max-width: 7.5in;
  margin: 0 auto;
  padding: 0.4in 0.3in;
}

/* -- Masthead ----------------------------------------------------------- */

.masthead { border-bottom: 2px solid var(--ink); padding-bottom: 0.2rem; }

h1 {
  margin: 0;
  font-size: 15pt;
  letter-spacing: 0.01em;
}

.asof { margin: 0.15rem 0 0; font-size: 9.5pt; }
.sources { margin: 0.1rem 0 0; font-size: 8pt; color: var(--soft); }

.notice {
  margin: 0 0 0.5rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--rule);
  background: var(--tint);
  font-size: 9pt;
}

/* -- The headline ------------------------------------------------------- */

/* The only thing on the page set larger than the body. A reader who reads
   nothing else reads this, so it is given the top of the sheet and the
   leading to be read standing up. */
.headline {
  margin: 0.45rem 0 0.5rem;
  padding: 0.35rem 0 0.45rem;
  border-bottom: 1px solid var(--rule);
}

.headline p {
  margin: 0 0 0.3rem;
  font-size: 11.5pt;
  line-height: 1.4;
}

.headline p:last-child { margin-bottom: 0; }

/* -- Blocks ------------------------------------------------------------- */

/* Two columns, so six sections fit one sheet. `wide` spans both: the chart
   needs the width, and the giving block carries the budget table. */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 1.1rem;
}

.block { break-inside: avoid; margin: 0 0 0.55rem; }
.block.wide { grid-column: 1 / -1; }

h2 {
  margin: 0.4rem 0 0.3rem;
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mid);
  border-bottom: 1px solid var(--rule);
}

h3 {
  margin: 0.4rem 0 0.15rem;
  font-size: 9.5pt;
}

/* -- Tables ------------------------------------------------------------- */

/* Every table here is label / figure / note, and the columns are sized by
   class rather than by position. `td:last-child` was doing that job and it
   broke the moment a table had three columns instead of two: the budget
   table's year total and its chance-of-being-met ran into each other and
   printed as "$290,214about 50%". Position is not a column's identity. */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9pt;
  table-layout: fixed;
}

th[scope="row"] {
  text-align: left;
  font-weight: normal;
  padding: 0.12rem 0.4rem 0.12rem 0;
  /* Labels wrap -- "Sunday evening against Sunday morning" does -- and a
     wrapped label must not drag its own figure out of line with the rows
     above it. */
  vertical-align: baseline;
  line-height: 1.25;
}

thead th {
  text-align: right;
  font-size: 7.5pt;
  color: var(--soft);
  font-weight: normal;
  border-bottom: 1px solid var(--rule);
  padding: 0 0.4rem 0.1rem 0;
}
thead th:first-child { text-align: left; }

td {
  padding: 0.12rem 0.4rem 0.12rem 0;
  text-align: right;
  vertical-align: baseline;
}
td:last-child { padding-right: 0; }

.figure { font-weight: bold; }
.note-cell { color: var(--mid); font-size: 8pt; }

/* Two-column tables: label, figure, change.
   The note column holds phrases -- "about the same", "from 50 wk", "12% up"
   -- not numbers, and at 4.5em it wrapped every one of them onto two lines.
   Sized for the longest phrase the templates can produce. */
table.pairs th[scope="row"] { width: auto; }
table.pairs .figure { width: 4em; }
table.pairs .note-cell { width: 8em; white-space: nowrap; }

/* The row worth carrying out of the room. A rule and a tint, not a colour. */
tr.now {
  border-top: 1px solid var(--rule);
  background: var(--tint);
  font-weight: bold;
}
tr.now .note-cell { color: var(--ink); }

/* The budget table: weekly, yearly, chance. Three real columns, each with a
   width of its own. */
table.budget { margin-top: 0.15rem; }
table.budget th:nth-child(1), table.budget td:nth-child(1) { width: 26%; text-align: right; }
table.budget th:nth-child(2), table.budget td:nth-child(2) { width: 34%; text-align: right; }
table.budget th:nth-child(3), table.budget td:nth-child(3) { width: 40%; text-align: right; }

/* The years behind the recommendation. Was a run-on sentence and read as one. */
table.years { margin-top: 0.2rem; }
table.years th:nth-child(1), table.years td:nth-child(1) { width: 18%; text-align: left; }
table.years th:nth-child(2), table.years td:nth-child(2) { width: 27%; }
table.years th:nth-child(3), table.years td:nth-child(3) { width: 27%; }
table.years th:nth-child(4), table.years td:nth-child(4) { width: 28%; }
.missed { font-weight: bold; }

/* -- The chart ---------------------------------------------------------- */

.chart { width: 100%; height: 1.9in; display: block; }

/* Weight and dash, never hue: this has to survive a greyscale printer and a
   photocopy of the printout. */
.chart .weekly { fill: none; stroke: var(--soft); stroke-width: 0.6; }
.chart .mean   { fill: none; stroke: var(--ink);  stroke-width: 2; }
.chart .grid   { stroke: var(--rule); stroke-width: 0.4; stroke-dasharray: 2 2; }
.chart .tick   { font-size: 7px; fill: var(--soft); font-family: Georgia, serif; }

/* -- Small print -------------------------------------------------------- */

.note { margin: 0.2rem 0; font-size: 9pt; }
.key { margin: 0.15rem 0 0; font-size: 7.5pt; color: var(--soft); line-height: 1.3; }
.cannot { margin: 0.2rem 0; font-size: 9pt; color: var(--soft); font-style: italic; }

.notes { grid-column: 1 / -1; margin-top: 0.3rem; }
.notes ul { margin: 0.15rem 0 0; padding-left: 1rem; }
.notes li { font-size: 7.5pt; color: var(--soft); line-height: 1.35; margin: 0.08rem 0; }

/* -- Print -------------------------------------------------------------- */

@media print {
  /* Two pages is fine -- Austin's call, 2026-10-09 -- so nothing is squeezed
     to fit one. What matters instead is that a section does not straddle the
     break: a budget table split across two sheets is read as two tables. */
  .block, table, .headline { break-inside: avoid; }
  h2, h3 { break-after: avoid; }

  /* **The grid is dropped for print**, and this is not a preference.
     A grid row taller than the space left on the page does not move to the
     next page -- it is painted on both, and the printed proof showed
     Commitment and Children rendered twice, once at the foot of page 1 and
     again at the head of page 2. CSS grid and paged media disagree about
     what a row is, and the browser resolves it by duplicating.
     Stacking the blocks sidesteps it entirely: a block is a block, it fits or
     it moves, and `break-inside: avoid` above means it moves whole. */
  .columns { display: block; }
  .block.wide, .block { width: 100%; }

  /* Belt and braces against a browser or an extension deciding this document
     would look better dark. It would not; it would cost a toner cartridge. */
  body { background: #fff !important; color: #000 !important; }
  .sheet { max-width: none; padding: 0; }
  .notice { display: none; }
  a[href]::after { content: ""; }
}

/* On screen the sheet is shown as a sheet, so what is on the page and what
   comes out of the printer are the same shape. */
@media screen {
  body { background: #e8e8e6; padding: 1rem 0; }
  .sheet {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    min-height: 10in;
  }
}

/* -- Appendix (page three, provisional) --------------------------------- */

/* It starts a page of its own: it is explicitly not part of the report, and a
   section headed "for review" sharing a sheet with the budget table would be
   read as part of it. */
.appendix { break-before: page; border-top: 2px solid var(--ink); padding-top: 0.3rem; }
.appendix h2 { border-bottom: none; margin-top: 0; }

table.months th[scope="row"] { width: 6.5em; }
table.months .bar { width: auto; padding-right: 0.6rem; }
table.months .figure { width: 5em; }
table.months .note-cell { width: 3.5em; }

/* The bar is a filled span rather than a chart: it has to survive print, and
   `width` on a span is the one thing every print pipeline agrees about. */
table.months .bar span {
  display: block;
  height: 0.62em;
  background: var(--mid);
  min-width: 1px;
}

table.services th[scope="row"], table.events th[scope="row"] { width: auto; }
table.services td, table.events td { width: 5.5em; }

.appendix-notes { margin: 0.3rem 0 0; padding-left: 1rem; }
.appendix-notes li {
  font-size: 7.5pt; color: var(--soft); line-height: 1.35; margin: 0.08rem 0;
}

table.longrun th[scope="row"] { width: 4em; }
table.longrun td { width: 7em; }