.server-profile-panel {
  display:
    grid;

  gap:
    18px;
}


.server-profile-heading,
.server-section-title {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;
}


.server-section-title {
  margin-bottom:
    14px;
}


.server-section-title > div {
  display:
    grid;

  gap:
    4px;
}


.server-section-title span:not(.setting-origin) {
  color:
    var(--text-secondary);

  font-size:
    .9rem;
}


.server-settings-section {
  padding:
    14px 0;

  border-top:
    1px solid
    var(--border);
}


.setting-origin,
.server-setup-state {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    26px;

  padding:
    4px 8px;

  border:
    1px solid
    var(--border);

  border-radius:
    4px;

  font-size:
    .75rem;

  font-weight:
    700;

  white-space:
    nowrap;
}


.setting-origin.client {
  background:
    rgba(
      255,
      255,
      255,
      .28
    );
}


.setting-origin.generated,
.setting-origin.derived {
  background:
    rgba(
      255,
      255,
      255,
      .18
    );
}


.server-setup-state.complete {
  font-weight:
    800;
}


.server-setup-state.incomplete {
  opacity:
    .8;
}


.server-generated-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    10px;
}


.server-derived-row {
  display:
    grid;

  gap:
    7px;

  min-height:
    82px;

  padding:
    12px;

  border:
    1px solid
    var(--border);

  border-radius:
    4px;
}


.server-derived-row > div {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}


.server-derived-row strong {
  overflow-wrap:
    anywhere;
}


.server-derived-label {
  color:
    var(--text-secondary);

  font-size:
    .82rem;

  font-weight:
    700;
}


.server-advanced {
  padding:
    12px;

  border:
    1px solid
    var(--border);

  border-radius:
    4px;
}


.server-advanced summary {
  cursor:
    pointer;

  font-weight:
    800;
}


.server-dependency-note,
.server-missing,
.server-complete,
.server-readonly-note {
  padding:
    12px;

  border:
    1px solid
    var(--border);

  border-radius:
    4px;
}


.server-dependency-note {
  border-left:
    3px solid
    var(--accent);
}


.server-dependency-note p {
  margin-bottom:
    0;
}


.server-missing {
  display:
    grid;

  gap:
    4px;
}


.server-missing span,
.server-readonly-note {
  color:
    var(--text-secondary);
}


.server-profile-actions {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    12px;
}


.field-help {
  margin-left:
    4px;

  color:
    var(--text-secondary);

  font-size:
    .78rem;
}


@media (
  max-width: 840px
) {

  .server-generated-grid {
    grid-template-columns:
      1fr;
  }

}


@media (
  max-width: 620px
) {

  .server-profile-heading,
  .server-section-title {
    align-items:
      stretch;

    flex-direction:
      column;
  }

}