/* ==========================================================================
   Governing Bodies  —  /page/governing-bodies/
   --------------------------------------------------------------------------
   Three tables of the same four columns. The postal address is the widest
   thing in any of them and the serial number the narrowest, so the columns
   are given explicit widths rather than left to the browser, which would
   hand the address whatever it asked for and squeeze the names.

   Below 820px each row becomes a card. Five columns carrying a postal
   address at phone width is a horizontal scroll nobody finds, and the
   address is the column that would be squeezed to four characters a line.
   ========================================================================== */

.gb-body + .gb-body { margin-top: 44px; }

.gb-date {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .88rem;
}

.gb-wrap {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow-x: auto;              /* a narrow laptop scrolls rather than clips */
}

.gb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.gb-table th,
.gb-table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}
.gb-table tbody tr:last-child th,
.gb-table tbody tr:last-child td { border-bottom: 0; }
.gb-table tbody tr:hover { background: rgb(var(--accent-rgb) / 4%); }

.gb-table thead th {
  /* 8%, the tint the fee and telephone tables use: --accent-deep on 10%
     falls under the 4.5:1 a heading this size needs. */
  background: rgb(var(--accent-rgb) / 8%);
  color: var(--accent-deep);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.gb-table tbody th { color: var(--ink); font-weight: 700; }

/* Widths, so the address cannot take the room the names need. */
.gb-sn { width: 1%; color: var(--muted); white-space: nowrap; }
.gb-when { width: 1%; white-space: nowrap; color: var(--muted); }
.gb-addr { width: 40%; }

.gb-none { color: var(--muted); }

/* ==========================================================================
   One card per member, below 820px
   ========================================================================== */
@media (max-width: 819.98px) {
  .gb-wrap {
    background: none;
    box-shadow: none;
    overflow-x: visible;
  }
  .gb-table thead {
    /* Not display: none - that takes the header out of the accessibility tree
       as well, and a screen reader still uses it to announce cells. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .gb-table,
  .gb-table tbody,
  .gb-table tr,
  .gb-table th,
  .gb-table td { display: block; }

  .gb-table tr {
    position: relative;
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-xs);
  }
  .gb-table tr:last-child { margin-bottom: 0; }
  .gb-table tr:hover { background: var(--paper); }

  .gb-table th,
  .gb-table td {
    width: auto;
    padding: 0;
    border-bottom: 0;
    white-space: normal;
  }
  .gb-table td { margin-top: 9px; }

  .gb-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  /* The serial number sits in the corner of its card rather than taking a
     labelled row of its own - it is a position in a list, not a fact about
     the member. */
  .gb-sn {
    position: absolute;
    top: 14px;
    right: 16px;
    margin: 0;
    font-size: .75rem;
  }
  .gb-sn::before { content: none; }
  .gb-table tbody th { font-size: 1rem; padding-right: 34px; }
}