/* ===========================================================
   /development-report, the Franklin Development Report, and each
   quarter's edition. Rendered by Astro from src/content/development-report
   (src/pages/development-report/). Loads after monocle.css and
   article.css, whose stat strip, body blocks, data table, callout and
   sources list it uses as they are. What it adds: a wide column for the
   tables, the steps inside a table cell, the spreadsheet's column list,
   the editions list on the front, and the print rules the PDF edition is
   printed with (tools/development-report.mjs). Monochrome per DESIGN.md's
   accent rule.
   =========================================================== */

.wide { max-width: 1120px; margin-left: auto; margin-right: auto; }
.wide .body-block p { max-width: 64ch; }
.wide .body-block p.table-foot { max-width: none; }

/* ------- Inside a table ------- */
.data-table a { color: var(--ink); text-decoration: none; }
.data-table a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-slate); }
.data-table td p { margin: 0; }
.data-table .steps { margin: 0; padding: 0; list-style: none; }
.data-table .steps li + li { margin-top: 6px; }
.data-table .who { font: 700 11px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.data-table .quiet { color: var(--ink-soft); }
.data-table[data-quarters] td.num strong, .data-table[data-quarters] th.num strong { font-weight: 700; color: var(--ink); }
.data-table[data-quarters] td:first-child { font: 400 14px/1.45 var(--sans); color: var(--ink); }
.data-table[data-approved] td:first-child { min-width: 9em; }
/* Two meeting dates must wrap in the four-across phone layout. */
.data-table[data-sureties] td:last-child { white-space: normal; }
.data-table[data-approved] td:nth-child(4), .data-table[data-approved] td:nth-child(5) { font-size: 13px; }

/* ------- The spreadsheet's columns ------- */
.columns { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 8px 20px; margin: 24px 0 0; font: 400 14px/1.45 var(--sans); }
.columns dt { margin: 0; }
.columns dt code { font: 400 13px/1.45 ui-monospace, Menlo, monospace; color: var(--ink); overflow-wrap: anywhere; }
.columns dd { margin: 0; color: var(--ink-muted); }
.body-block .ask { margin: 24px 0 0; }
@media (max-width: 640px) {
  /* The quarters side by side under each row's name, as article.css's
     .cols-4 does for four figures. */
  .data-table[data-quarters] tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
  .data-table[data-quarters] td:first-child { grid-column: 1 / -1; margin-bottom: 0; }
  .columns { grid-template-columns: 1fr; gap: 2px; }
  .columns dd { margin-bottom: 10px; }
}

/* ------- The front's editions ------- */
.editions { margin: 24px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.editions li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.editions .thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
@media (max-width: 640px) { .editions li { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; } .editions a { font-size: 18px; } }
.editions a { font: 700 22px/1.25 var(--serif); color: var(--ink); text-decoration: none; }
.editions a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--blue-slate); }
.editions .facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; font: 400 13px/1.5 var(--sans); color: var(--ink-soft); }

/* ------- The PDF edition: the page printed, plus the appendix the tool
   adds. The appendix exists only in the PDF. ------- */
.appendix table { width: 100%; border-collapse: collapse; font: 400 8pt/1.35 var(--sans); }
.appendix th { text-align: left; font-weight: 700; border-bottom: 1px solid #000; padding: 3pt 4pt 3pt 0; }
.appendix td { border-bottom: 0.5pt solid #bbb; padding: 3pt 4pt 3pt 0; vertical-align: top; }
@media print {
  @page { size: letter; margin: 0.55in; }
  body { background: #fff; color: #000; }
  .dateline, .masthead, .nav-toggle, .cta-band, footer, .skip-link, .body-block .ask { display: none !important; }
  .wide, .read, .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .table-scroll { overflow: visible; }
  .data-table { font-size: 9pt; }
  .data-table td, .data-table th { padding: 5pt 8pt 5pt 0; }
  .data-table tr, .statstrip, .callout { break-inside: avoid; }
  h2 { break-after: avoid; }
  a { color: #000; }
}