* { box-sizing: border-box; }
  body { background-color: #099; font-family: sans-serif; font-size: 14px; }
  #list-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .toolbar {
    flex: 1 auto;
    padding: 0.5em;
    background-color: rgb(238, 238, 238);
    border-bottom: 1px solid #ddd;
    position: fixed;
    height: 50px;
    width: 100%;
    z-index: 100;
    display: flex;
    box-shadow: 1px 0 10px #ccc;
  }
  .toolbar input[type="search"] {
    padding: 0.5em;
    flex: 1 auto;
  }

  #list-wrap .email-list {
    overflow-y: auto;
    padding: 60px 0.2em 0.2em 0.2em;
    display: grid;
    grid-template-columns: minmax(10ch, 20ch) 30px minmax(300px, 1fr) min-content min-content;
    gap: 0;
  }

  .email-list > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.5em;
  }

  .email-date {
      white-space: nowrap;
      overflow: visible;
  }

  .email-list > div:nth-child(10n+1),
  .email-list > div:nth-child(10n+2),
  .email-list > div:nth-child(10n+3),
  .email-list > div:nth-child(10n+4),
  .email-list > div:nth-child(10n+5) {
      background-color: #f6f6f6;
  }

  .email-subject {
    cursor: pointer;
  }
  .email-subject:hover {
    text-decoration: underline;
  }
  .email-subject span:first-of-type {
    font-weight: bold;
  }
  .email-subject span:last-of-type {
    color: #666;
  }

  .email-sender {
    cursor: pointer;
  }
  .email-sender:hover {
    text-decoration: underline;
  }