/* /elections/ hub. The Senate board sits in a <details> that stays closed
   until counting starts (election_board.js opens it), and on phones its
   three columns stack into one block per seat so the count is never
   clipped off the right edge. */

.election-hub-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-5); }

/* The ZIP and state forms: 44px targets, like the map's ZIP form, with the
   button level with the bottom of its labelled field. */
.hub-form { align-items: flex-end; }
.hub-form input,
.hub-form select,
.hub-form .btn { min-height: 44px; }

.senate-board-details { margin: 0 0 var(--sp-3); }
.senate-board-details > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--ink-300);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink-900);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.senate-board-details > summary::-webkit-details-marker { display: none; }
.senate-board-details > summary::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 120ms ease;
  flex-shrink: 0;
}
.senate-board-details[open] > summary::before { transform: rotate(45deg); }
.senate-board-details > summary:hover { background: var(--ink-50); }
.senate-board-details[open] > summary { margin-bottom: var(--sp-3); }
@media (prefers-reduced-motion: reduce) {
  .senate-board-details > summary::before { transition: none; }
}

/* Phones: one stacked block per seat (state, then senator, then count). */
@media (max-width: 599.98px) {
  #senate-board thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #senate-board,
  #senate-board tbody,
  #senate-board tr,
  #senate-board td { display: block; width: 100%; }
  #senate-board tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--ink-200); }
  #senate-board tbody tr:hover { background: transparent; }
  /* The wrap is a bordered, rounded card; keep text off its edges. The
     table keeps role=table/row/cell in the markup so display:block here
     does not strip the column headers from screen readers. */
  #senate-board td { padding: 2px var(--sp-3); border-bottom: 0; }
  #senate-board td.senate-count::before { content: 'Count: '; font-weight: 600; color: var(--ink-700); }
}