/* send-slush additions on top of the vendored MDIL styles (ds/app.css). Tokens only. */

.tablewrap {
  overflow-x: auto;
  margin: 0.8rem 0;
  border: 1px solid var(--hair);
  border-radius: var(--app-radius);
  background: var(--bg-card);
}

table.grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;

  th,
  td {
    text-align: left;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--hair-2);
    vertical-align: top;
  }

  th {
    font-family: var(--mono);
    font-size: var(--app-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-label);
    font-weight: var(--fw-body);
    white-space: nowrap;
  }

  tr.invalid td {
    color: var(--ink-dim);
  }

  input[type="checkbox"] {
    accent-color: var(--brand);
  }
}

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--app-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.5rem;
  border-radius: var(--r-xs);
  border: 1px solid var(--hair);
  background: var(--bg-card-2);

  &.sent,
  &.done {
    background: var(--success-soft);
    border-color: var(--success-line);
    color: var(--success-2);
  }

  &.failed,
  &.test-failed,
  &.cancelled {
    background: var(--accent-soft);
    border-color: var(--accent-dim);
    color: var(--accent-2);
  }

  &.paused,
  &.queued {
    background: var(--amber-soft);
    border-color: var(--amber-line);
    color: var(--amber-2);
  }

  &.sending,
  &.test {
    background: var(--info-soft);
    border-color: var(--info-line);
    color: var(--info-2);
  }
}

form.inline {
  display: inline-block;
  margin-right: 0.5rem;
}

.actions {
  margin: 0.5rem 0 1rem;

  .btn {
    margin-right: 0.5rem;
  }
}

.preview pre {
  white-space: pre-wrap;
  font-family: var(--sans);
  margin: 0;
}

.chips code,
code {
  font-family: var(--mono);
  font-size: 0.85rem;
  background: var(--bg-well);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-xs);
  padding: 0.05rem 0.35rem;
}

.checkctl {
  font-size: 0.9rem;
}

textarea {
  min-height: 14rem;
  line-height: var(--lh-body);
}

.filter {
  margin: 0.6rem 0;

  select,
  input {
    max-width: 28rem;
  }
}

/* Writing one by one: the recipient's card above the message. */
.recipient {
  margin: 0.6rem 0;

  dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
  }

  dt {
    font-family: var(--mono);
    font-size: var(--app-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-label);
    padding-top: 0.15rem;
  }

  dd {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
  }

  details {
    margin-top: 0.8rem;

    dl {
      margin-top: 0.6rem;
    }
  }
}

summary {
  cursor: pointer;
  color: var(--ink-soft);
}

.sendrow button {
  margin-right: 0.5rem;
}

.testrow {
  margin: 1.4rem 0 0.6rem;

  input {
    max-width: 28rem;
  }
}

ul.skipped {
  columns: 2 18rem;
  padding-left: 1.1rem;
  font-size: 0.92rem;
}

.othertools {
  margin-top: 2rem;
}