/* People: the board front at /people and a page per member. Loaded after
   monocle.css and places.css (whose .facts list the member pages reuse).
   The one new component is the vote table: a date, the item, the result
   and a vote, set like the explainers' data tables, which on a phone
   becomes one card per vote. Accent rule applies: a "no" is marked with a
   Blue Slate rule, never a colored fill. */

.people-head .kicker a { color: inherit; text-decoration: none; }
.people-head .kicker a:hover { text-decoration: underline; text-decoration-color: var(--blue-slate); }

.vote-table { width: 100%; border-collapse: collapse; margin-top: 20px; font: 400 14px/1.45 var(--sans); }
.vote-table th {
  text-align: left;
  font: 700 10px/1.4 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dispatch-grey);
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--press-black);
}
.vote-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--gallery-border); vertical-align: top; color: var(--ink-charcoal); }
.vote-table td:last-child, .vote-table th:last-child { padding-right: 0; }
.vote-table td.when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vote-table td.when a { color: inherit; text-underline-offset: 2px; text-decoration-color: var(--gallery-border); }
.vote-table td.what { font: 400 15px/1.45 var(--serif); color: var(--press-black); }
.vote-table td.result { white-space: nowrap; }
.vote-table .sub { display: block; font: 400 12px/1.4 var(--sans); color: var(--dispatch-grey); margin-top: 2px; }
.vote-table a.name { color: inherit; text-underline-offset: 2px; text-decoration-color: var(--gallery-border); }
.vote-table a.name:hover, .vote-table td.when a:hover { text-decoration-color: var(--blue-slate); }

/* A member's own vote: the word, with a rule under a no. */
.vote { font: 700 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.vote.no { color: var(--press-black); border-bottom: 2px solid var(--blue-slate); padding-bottom: 2px; }
.vote.aye { color: var(--ink-charcoal); }
.vote.out { color: var(--dispatch-grey); font-weight: 400; }

.people-note { margin-top: 14px; max-width: 720px; font: 400 12px/1.55 var(--sans); color: var(--dispatch-grey); }
.people-note a { color: inherit; }
.people-prose { max-width: 720px; }
.people-prose p { font: 400 17px/1.6 var(--serif); color: var(--press-black); margin: 0 0 14px; }
.people-prose a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--blue-slate); }

@media (max-width: 640px) {
  .vote-table, .vote-table tbody, .vote-table tr, .vote-table td { display: block; }
  .vote-table thead { display: none; }
  .vote-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 14px 0 16px; border-bottom: 1px solid var(--gallery-border); }
  .vote-table td { padding: 0; border: 0; }
  .vote-table td.what { grid-column: 1 / -1; order: -1; margin-bottom: 8px; }
  .vote-table td.when { grid-column: 1; }
  .vote-table td.result { grid-column: 2; text-align: right; }
  .vote-table td.mine, .vote-table td.noes { grid-column: 1 / -1; margin-top: 8px; }
  /* On a member's page the member's vote and the no votes share a line. */
  .vote-table tr:has(td.mine) { grid-template-columns: auto minmax(0, 1fr); }
  .vote-table td.mine { grid-column: 1; padding-right: 24px; }
  .vote-table tr:has(td.mine) td.noes { grid-column: 2; }
  .vote-table tr:has(td.mine) td.result { grid-column: 2; }
  .vote-table td.noes::before, .vote-table td.mine::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    font: 700 10px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dispatch-grey);
  }
}

/* The County Commission's former members, under its roster. */
.people-subhead { margin: 36px 0 4px; }