/* ===========================================================
   /elections/<year>, a Franklin city election. Rendered by Astro from
   src/content/elections (src/pages/elections/[year].astro). 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 vote tables, the vote cells, the agreement grid, the
   folded list of every split vote and the questionnaire. Monochrome per
   DESIGN.md's accent rule: a no is set bold, not coloured.
   =========================================================== */

.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: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline); }
.data-table a:hover { text-decoration-color: var(--blue-slate); }
.data-table .quiet { color: var(--ink-soft); }
.data-table .src { font: 400 12px/1.4 var(--sans); color: var(--ink-soft); white-space: nowrap; }
.data-table .challenger { margin-top: 8px; }
.data-table[data-seats] td:first-child { min-width: 8.5em; }
.data-table[data-seats] td:last-child { min-width: 16em; }
.data-table[data-calendar] td:first-child { white-space: nowrap; }

/* A vote: Yes in the body grey, No in bold ink, not voting in the soft grey. */
.data-table .v { text-align: center; white-space: nowrap; width: 5.5em; }
.data-table th.v { text-align: center; }
.data-table td.v.no { font-weight: 700; color: var(--ink); }
.data-table td.v.absent { color: var(--ink-soft); font-size: 12px; }
.data-table.votes td:nth-child(2) { width: 7em; }

/* The members on this year's ballot, in the standings and the grid. */
.data-table tr.up td:first-child a, .data-table tr.up th { font-weight: 700; }

/* ------- The agreement grid: eight by eight, numbers only. It keeps its
   columns on a phone and scrolls inside its own box. ------- */
.data-table.agree { font-size: 13px; width: auto; min-width: min(100%, 760px); }
.data-table.agree th, .data-table.agree td { padding: 9px 6px; text-align: right; border-bottom: 1px solid var(--hairline); }
.data-table.agree thead th { font: 700 10px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.data-table.agree tbody th { text-align: left; font: 400 15px/1.3 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; padding-left: 0; }
.data-table.agree tbody tr.up th { font-weight: 700; }
.data-table.agree td.self { color: var(--hairline); }
.data-table.agree td:first-child { font: inherit; }

/* ------- Every split vote, folded away ------- */
.all-splits { margin: 30px 0 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hairline); }
.all-splits summary { cursor: pointer; padding: 14px 0; font: 700 14px/1.4 var(--sans); color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.all-splits summary::-webkit-details-marker { display: none; }
.all-splits summary::after { content: "+"; font-weight: 400; font-size: 18px; line-height: 1; }
.all-splits[open] summary::after { content: "\2212"; }
.all-splits summary:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-slate); }
.all-splits .table-scroll { margin-top: 6px; }

/* ------- The questionnaire ------- */
.questions { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: q; border-top: 1px solid var(--ink); }
.questions li { counter-increment: q; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: 0 8px; padding: 14px 0; border-bottom: 1px solid var(--hairline); font: 400 17px/1.5 var(--serif); color: var(--ink); }
.questions li::before { content: counter(q, decimal-leading-zero); font: 700 12px/1.9 var(--sans); letter-spacing: .06em; color: var(--ink-soft); }
.body-block .ask { margin: 24px 0 0; }

@media (max-width: 640px) {
  /* A vote table: the vote and the result on their own lines, then the
     members' votes four across under their names. */
  .data-table.votes tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 12px; }
  .data-table.votes td:nth-child(1), .data-table.votes td:nth-child(2) { grid-column: 1 / -1; width: auto; }
  .data-table.votes td:nth-child(1) { margin-bottom: 0; }
  .data-table .v { width: auto; text-align: left; }
  /* The grid keeps its table layout and scrolls in its box. */
  .grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table.agree { display: table; min-width: 540px; }
  .data-table.agree thead { display: table-header-group; }
  .data-table.agree tbody { display: table-row-group; }
  .data-table.agree tr { display: table-row; padding: 0; border: 0; }
  .data-table.agree th, .data-table.agree td { display: table-cell; padding: 8px 5px; border-bottom: 1px solid var(--hairline); }
  .data-table.agree tbody th { position: sticky; left: 0; background: var(--editorial-white); }
  .data-table .src { white-space: normal; }
  .questions li { font-size: 16px; }
}