:root {
  --brand:        #3bafaf;
  --brand-light:  #f0fdfa;
  --brand-border: #c8eaea;
  --brand-dark:   #1e8a8a;
}

/* Prevent a white-flash on the header before JS populates its content */
header[data-title] {
  position: relative;
  padding-top: 1.25rem;
  padding-bottom: 0;
  overflow: hidden;
  background: var(--brand);
}

.btn-primary {
  padding: .625rem 1rem;
  border-radius: .75rem;
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  transition: opacity .15s;
}
.btn-primary:active  { opacity: .8; }
.btn-primary:disabled { opacity: .7; }

.input-field {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  outline: none;
}
.input-field:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}

.card {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  border: 1px solid #f3f4f6;
}

.card-header {
  padding: .625rem 1rem;
  background: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
}

.chip {
  display: inline-flex;
  align-items: center;
  background: var(--brand-light);
  border: 1px solid var(--brand-border);
  color: var(--brand-dark);
  font-size: .875rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}