.personal-integrations, .personal-integration { scroll-margin-block-start: 5rem; }
.personal-integration-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.personal-integration {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: .5rem .75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.connector-logo {
  width: 38px;
  height: 38px;
  flex: none;
  background: center / contain no-repeat;
}
.connector-logo[data-provider="osyn"] { background-image: url("osyn-brand.svg"); }
.connector-logo[data-provider="clickup"] { background-image: url("clickup-brand.svg"); }
.connector-logo[data-provider="google-calendar"] { background-image: url("google-calendar-brand.png"); }
.connector-logo[data-provider="google-drive"] { background-image: url("google-drive-brand.png"); }
.personal-integration-copy h3 { margin: 0 0 .2rem; }
.personal-integration-copy p { margin: .15rem 0; }
.personal-integration [role="status"] { font-weight: 700; }
.personal-integration button { grid-column: 2; justify-self: start; }

.connector-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
  gap: 6px 10px;
  padding: 6px;
}

.connector-shortcut {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: 6px 10px;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--ink);
}

.connector-title-link:hover {
  color: var(--violet);
  text-decoration: underline;
}

.connector-shortcut-copy {
  display: grid;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: .85rem;
}

.connector-shortcut-copy h3 {
  font-size: .9rem;
}

.connector-shortcut-copy p {
  margin-top: 2px;
}

.connector-shortcut .button {
  grid-column: 2;
  justify-self: start;
  min-height: 36px;
  padding: 5px 9px;
  white-space: normal;
  text-align: left;
}

.personal-connection-status[data-state="connected"] {
  color: #256347;
}

.personal-connection-status[data-state="connected"]::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 5px 1px 0;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.personal-connection-status[data-state="error"] {
  color: #9d3838;
}

@media (max-width: 760px) {
  .personal-integration-list { grid-template-columns: minmax(0, 1fr); }
}