/* Settings tables at phone width.
 *
 * Every table cell in style.css is `white-space: nowrap` inside a sideways
 * scroller, which suits a roster and not these two cards:
 *
 * - Shared links, when empty, is one sentence in one cell. Unwrapped it ran
 *   off the card's right edge at 390px and read as cut off.
 * - Who can sign in puts an email, a role select and a Remove button in one
 *   row. At 390px the email alone fills the width, so the "Can" select sat
 *   off the card behind a scroll nobody finds. Below 560px each account
 *   becomes a short stack instead: who, what they can do, remove.
 */

#boardTable td.hint { white-space: normal; }

@media (max-width: 560px) {
  #accountTable thead { display: none; }
  #accountTable,
  #accountTable tbody,
  #accountTable tr,
  #accountTable td { display: block; width: 100%; }
  #accountTable tr { border-top: 1px solid var(--line); padding: 10px 0; }
  #accountTable td {
    border-top: 0;
    padding: 4px 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #accountTable td:empty { display: none; }
  #accountTable select { width: 100%; max-width: 100%; }
}